* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

:root {
  --bg: #0b1020;
  --panel: #121a34;
  --text: #f5f7ff;
  --muted: #aab3cf;
  --accent: #f08b4f;
  --accent2: #7a63ff;
  --line: rgba(255, 255, 255, .08)
}

body {
  margin: 0;
  font-family: 'DM Sans', Arial, sans-serif;
  background:
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(122, 99, 255, .13), transparent),
    radial-gradient(ellipse 55% 35% at 100% 0%, rgba(240, 139, 79, .09), transparent),
    var(--bg);
  color: var(--text)
}

.container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto
}

main {
  padding-top: 104px
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px 0;
  pointer-events: none
}

.nav-container {
  pointer-events: all;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 16px;
  padding: 0 10px 0 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(18, 24, 54, .94) 0%, rgba(11, 16, 32, .96) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: box-shadow .3s
}

/* Gradient glow seam along bottom of pill */
.nav-container::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(240, 139, 79, .30) 35%,
      rgba(122, 99, 255, .25) 65%,
      transparent);
  border-radius: 1px;
  pointer-events: none
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--text)
}

.brand-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0
}

.brand span {
  background: linear-gradient(100deg, var(--text) 28%, var(--accent2) 58%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  position: relative;
  transition: color .2s, background .2s;
  white-space: nowrap
}

.nav-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: color .2s, transform .28s cubic-bezier(.34, 1.56, .64, 1)
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 13px;
  right: 13px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1)
}

.nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05)
}

.nav-link:hover::after {
  transform: scaleX(1)
}

.nav-link:hover svg {
  color: var(--accent);
  transform: translateY(-2px)
}

/* Divider */
.nav-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 10px;
  flex-shrink: 0
}

/* Nav CTA */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e17245 0%, var(--accent) 35%, #ff9a5c 65%, #ffb16b 100%);
  color: #111;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(240, 139, 79, .25);
  transition: filter .2s, transform .18s, box-shadow .2s
}

.nav-cta svg {
  width: 14px;
  height: 14px
}

.nav-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(240, 139, 79, .30)
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .2s, border-color .2s
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2)
}

.bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .25s, width .25s
}

.nav-toggle.is-open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.nav-toggle.is-open .bar:nth-child(2) {
  opacity: 0;
  width: 0
}

.nav-toggle.is-open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

/* ── Mobile nav ──────────────────────────────────────────── */
@media (max-width:860px) {
  .nav-toggle {
    display: flex
  }

  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 14px 12px 18px;
    background: linear-gradient(160deg, rgba(18, 24, 54, .98), rgba(10, 14, 30, .99));
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    box-shadow:
      0 0 0 1px rgba(240, 139, 79, .06),
      0 24px 56px rgba(0, 0, 0, .6),
      inset 0 1px 0 rgba(255, 255, 255, .07);
    pointer-events: all
  }

  .nav-links.nav-open {
    display: flex;
    animation: navSlideDown .24s cubic-bezier(.4, 0, .2, 1)
  }

  .nav-link {
    padding: 12px 14px;
    font-size: .97rem;
    border-radius: 12px
  }

  .nav-link::after {
    display: none
  }

  .nav-divider {
    width: 100%;
    height: 1px;
    margin: 8px 0
  }

  .nav-cta {
    justify-content: center;
    padding: 13px 18px;
    font-size: .97rem;
    border-radius: 14px;
    margin-top: 4px;
    box-shadow: none
  }
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ── Sections ─────────────────────────────────────────────── */
.section {
  padding: 80px 0
}

.section-label {
  color: var(--accent);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .14em;
  margin: 0 0 12px
}

h1,
h2,
h3,
h4 {
  font-family: 'Space Grotesk', Arial, sans-serif;
  letter-spacing: -.02em
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 0 0 14px
}

h2 {
  margin: 0 0 14px
}

.lead {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 58ch
}

/* ──────────────────────────────────────────────────────
   HERO
────────────────────────────────────────────────────── */
.hero {
  padding: 80px 0 0;
  overflow: hidden
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
  padding-bottom: 80px;
    justify-content: center;
}

/* ─ Entrance animations ─ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes notifPop {
  0% {
    opacity: 0;
    transform: translateX(24px) scale(.9)
  }

  60% {
    opacity: 1;
    transform: translateX(-4px) scale(1.02)
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1)
  }
}

@keyframes pulseDot {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(80, 220, 120, .6)
  }

  60% {
    box-shadow: 0 0 0 7px rgba(80, 220, 120, 0)
  }
}

@keyframes shimmerSweep {
  0% {
    background-position: -200% center
  }

  100% {
    background-position: 200% center
  }
}

@keyframes tickerScroll {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ─ Hero copy (left) ─ */
.hero-copy {
  display: flex;
    flex-direction: column;
    align-items: flex-start;
  animation: fadeUp .72s cubic-bezier(.22, 1, .36, 1) both
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(122, 99, 255, .20), rgba(122, 99, 255, .08));
  border: 1px solid rgba(122, 99, 255, .40);
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
  margin-bottom: 28px;
  transition: background .2s, border-color .2s;
  animation: fadeUp .55s .05s cubic-bezier(.22, 1, .36, 1) both
}

.hero-badge:hover {
  background: rgba(122, 99, 255, .18);
  border-color: rgba(122, 99, 255, .50)
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #50dc78;
  flex-shrink: 0;
  animation: pulseDot 2s infinite
}

.badge-arrow {
  width: 13px;
  height: 13px;
  color: var(--accent2)
}

/* H1 */
.hero-h1 {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 22px;
  animation: fadeUp .65s .12s cubic-bezier(.22, 1, .36, 1) both
}

.h1-kicker {
  display: block;
  font-size: clamp(.85rem, 1.5vw, 1rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px
}

.h1-main {
  display: block;
  color: var(--text)
}

.h1-gradient {
  display: block;
  background: linear-gradient(105deg, var(--accent2) 0%, #c084fc 38%, #ff7eb3 68%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* Sub-headline */
.hero-sub {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.72;
  max-width: 52ch;
  margin: 0 0 32px;
  animation: fadeUp .65s .22s cubic-bezier(.22, 1, .36, 1) both
}

/* Social proof */
.hero-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 36px;
  animation: fadeUp .65s .3s cubic-bezier(.22, 1, .36, 1) both
}

.proof-avatars {
  display: flex;
  flex-shrink: 0
}

.proof-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: linear-gradient(135deg,
      hsl(calc(var(--i) * 52deg + 220deg), 60%, 55%),
      hsl(calc(var(--i) * 52deg + 270deg), 70%, 65%));
  margin-left: -8px
}

.proof-avatars .proof-avatar:first-child {
  margin-left: 0
}

.proof-text {
  font-size: .8rem;
  color: var(--muted);
  white-space: nowrap
}

.proof-text strong {
  color: var(--text)
}

.proof-pip {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  flex-shrink: 0
}

.proof-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  color: var(--muted);
  white-space: nowrap
}

.proof-icon {
  width: 11px;
  height: 11px;
  color: var(--accent)
}

/* CTAs */
.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: fadeUp .65s .38s cubic-bezier(.22, 1, .36, 1) both
}

.hero-cta-primary {
  position: relative;
  overflow: hidden;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e07240 0%, var(--accent) 30%, #ff9a5c 62%, #ffb16b 100%);
  color: #111;
  box-shadow: 0 4px 18px rgba(240, 139, 79, .28);
  transition: transform .18s, box-shadow .18s
}

.hero-cta-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 35%,
      rgba(255, 255, 255, .45) 50%,
      transparent 65%);
  background-size: 200% 100%;
  background-position: -200% center;
  animation: shimmerSweep 2.8s 1.2s ease-in-out infinite
}

.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(240, 139, 79, .36)
}

.hero-cta-primary svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: .01em;
  transition: background .2s, border-color .2s, transform .18s
}

.btn-ghost svg {
  width: 17px;
  height: 17px;
  color: var(--accent)
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
  transform: translateY(-2px)
}

/* ─ Hero visual / mockup (right) ─ */
.hero-visual {
  position: relative;
  animation: fadeIn .8s .35s both
}

.mock-card {
  position: relative;
  border-radius: 22px;
  background: rgba(14, 19, 40, 1);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .45);
  overflow: hidden;
  animation: floatCard 6s 1s ease-in-out infinite
}

.mock-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .02)
}

.mock-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0
}

.mock-dot.red {
  background: #ff5f57
}

.mock-dot.yellow {
  background: #febc2e
}

.mock-dot.green {
  background: #28c840
}

.mock-title {
  margin-left: 6px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em
}

.mock-body {
  padding: 14px 14px 10px
}

.mock-gig {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 7px;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s
}

.mock-gig.featured {
  background: rgba(122, 99, 255, .1);
  border-color: rgba(122, 99, 255, .2)
}

.mock-gig:last-child {
  margin-bottom: 0
}

.mock-gig-avatar {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--c1), var(--c2))
}

.mock-gig-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0
}

.mock-gig-name {
  font-size: .83rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mock-gig-meta {
  font-size: .72rem;
  color: var(--muted)
}

.mock-pay {
  color: #50dc78;
  font-weight: 700
}

.mock-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-shrink: 0
}

.mock-badge.new {
  background: rgba(122, 99, 255, .2);
  color: #a99fff
}

.mock-badge.open {
  background: rgba(80, 220, 120, .15);
  color: #50dc78
}

.mock-badge.booked {
  background: rgba(240, 139, 79, .15);
  color: var(--accent)
}

.mock-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: .75rem
}

.mock-foot-label {
  color: var(--muted)
}

.mock-foot-cta {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer
}

/* Floating notification */
.mock-notif {
  position: absolute;
  bottom: -18px;
  left: -24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(28, 36, 72, .98), rgba(15, 20, 44, .99));
  border: 1px solid rgba(122, 99, 255, .22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .40);
  animation: notifPop .7s 1.4s cubic-bezier(.22, 1, .36, 1) both;
  max-width: 260px;
  z-index: 2
}

.notif-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0
}

.notif-text {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.4
}

.notif-text strong {
  color: var(--text)
}

/* ─ Activity ticker ─ */
.hero-ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  padding: 12px 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent)
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: tickerScroll 32s linear infinite
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted)
}

.tick-icon {
  width: 12px;
  height: 12px;
  color: var(--accent);
  flex-shrink: 0
}

.ticker-sep {
  color: rgba(255, 255, 255, .15);
  font-size: 1rem
}

/* ─ Hero responsive ─ */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 52px
  }

  .hero-copy {
    align-items: center;
      text-align: center
    }
    
    .hero-sub {
      max-width: 100%;
    text-align: center
  }

  .hero-proof {
    justify-content: center
  }

  .hero-buttons {
    justify-content: center;
      width: 100%
  }

  .hero-visual {
    max-width: 520px;
    margin: 0 auto;
      width: 100%
  }

  .mock-notif {
    left: -12px;
    bottom: -14px
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 48px 0 0
  }

  .hero-h1 {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem)
  }

  .hero-sub {
    font-size: .97rem
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
      width: 100%
  }

  .hero-cta-primary,
  .btn-ghost {
    justify-content: center;
    width: 100%;
      text-align: center
  }

  .hero-proof {
    gap: 8px 10px
  }

  .proof-sep {
    display: none
  }

  .mock-notif {
    display: none
  }

  .hero-visual {
    max-width: 100%;
      width: 100%
  }

  .mock-card {
    border-radius: 16px
  }
}

@media (max-width: 400px) {
  .hero-h1 {
    font-size: clamp(1.6rem, 7vw, 2rem)
  }

  .hero-badge {
    font-size: .65rem;
    padding: 5px 11px
  }

  .proof-text,
  .proof-stat {
    font-size: .73rem
  }

  .hero-proof {
    flex-direction: column;
    align-items: center
  }

  .proof-avatars {
    display: none
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 14px 24px;
  text-decoration: none;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: .01em
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #ffb16b);
  color: #111;
  box-shadow: 0 2px 10px rgba(240, 139, 79, .22)
}

.btn-secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--text)
}

.btn-primary:hover {
  filter: brightness(1.1)
}

.btn-secondary:hover {
  border-color: var(--muted)
}

/* ════════════════════════════════════════════════════════════
   AUDIENCE SECTIONS  (Bands + Venues)
════════════════════════════════════════════════════════════ */
.audience-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 110px
}

/* Subtle tinted glow behind each section */
.bands-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 50% at 85% 50%, rgba(122, 99, 255, .08), transparent);
  pointer-events: none
}

.venues-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 50% at 15% 50%, rgba(240, 139, 79, .07), transparent);
  pointer-events: none
}

/* 2-column grid */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center
}

/* Venues flips visual left / copy right */
.venues-grid {
  direction: rtl
}

.venues-grid>* {
  direction: ltr
}

/* ── Scroll-reveal animation ── */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .6s cubic-bezier(.22, 1, .36, 1) var(--delay, 0s),
    transform .6s cubic-bezier(.22, 1, .36, 1) var(--delay, 0s)
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0)
}

/* ── Eyebrow label ── */
.audience-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 22px
}

.audience-eyebrow svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0
}

.bands-eyebrow {
  background: rgba(122, 99, 255, .12);
  border: 1px solid rgba(122, 99, 255, .28);
  color: #a99fff
}

.venues-eyebrow {
  background: rgba(240, 139, 79, .1);
  border: 1px solid rgba(240, 139, 79, .28);
  color: var(--accent)
}

/* ── Section headline ── */
.audience-h2 {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  color: var(--text)
}

.audience-lead {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 48ch;
  margin: 0 0 36px
}

/* ── Feature list ── */
.feature-list {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.feature-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: background .22s, border-color .22s
}

.feature-row:hover {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line)
}

.fr-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1)
}

.feature-row:hover .fr-icon {
  transform: scale(1.12)
}

.fr-icon svg {
  width: 18px;
  height: 18px
}

.bands-icon {
  background: rgba(122, 99, 255, .15);
  border: 1px solid rgba(122, 99, 255, .2);
  color: #a99fff
}

.venues-icon {
  background: rgba(240, 139, 79, .12);
  border: 1px solid rgba(240, 139, 79, .2);
  color: var(--accent)
}

.fr-body h3 {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -.01em;
  color: var(--text)
}

.fr-body p {
  font-size: .875rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.65
}

/* ── Section CTA ── */
.audience-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 14px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, filter .18s
}

.audience-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}

.bands-cta {
  background: rgba(122, 99, 255, .12);
  border: 1px solid rgba(122, 99, 255, .32);
  color: #c4b8ff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25)
}

.bands-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .30);
  filter: brightness(1.1)
}

.venues-cta {
  background: linear-gradient(135deg, var(--accent), #ffb16b);
  border: 1px solid transparent;
  color: #111;
  box-shadow: 0 2px 10px rgba(240, 139, 79, .22)
}

.venues-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(240, 139, 79, .30)
}

/* ════════════════════════════════════════════════════════════
   BAND PROFILE MOCK
════════════════════════════════════════════════════════════ */
.profile-mock {
  border-radius: 22px;
  background: rgba(14, 19, 40, 1);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .4);
  overflow: hidden
}

.pm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 18px
}

.pm-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(122, 99, 255, .8), rgba(240, 139, 79, .6))
}

.pm-meta {
  flex: 1;
  min-width: 0
}

.pm-name {
  display: block;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 800;
  font-size: .98rem;
  color: var(--text);
  margin-bottom: 5px
}

.pm-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.pm-tag {
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(122, 99, 255, .15);
  border: 1px solid rgba(122, 99, 255, .25);
  color: #a99fff
}

.pm-rate {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #50dc78;
  white-space: nowrap;
  flex-shrink: 0
}

.pm-rate span {
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted)
}

.pm-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.pm-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px
}

.pm-stat-val {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text)
}

.pm-stat-key {
  font-size: .72rem;
  color: var(--muted)
}

.pm-stat-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, .07)
}

.pm-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted)
}

.pm-label-icon {
  width: 12px;
  height: 12px;
  color: var(--accent)
}

.pm-calendar {
  display: flex;
  gap: 6px;
  padding: 0 20px 16px
}

.pm-day {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05)
}

.pm-day.avail {
  background: rgba(80, 220, 120, .12);
  border-color: rgba(80, 220, 120, .25);
  color: #50dc78
}

.pm-reviews {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 20px 16px
}

.pm-review {
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06)
}

.pm-rev-stars {
  color: #f0c040;
  font-size: .75rem;
  margin-bottom: 4px
}

.pm-rev-text {
  font-size: .78rem;
  color: var(--text);
  margin: 0 0 4px;
  font-style: italic;
  line-height: 1.5
}

.pm-rev-venue {
  font-size: .7rem;
  color: var(--muted)
}

.pm-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px 20px;
  padding: 12px;
  border-radius: 13px;
  background: rgba(122, 99, 255, .15);
  border: 1px solid rgba(122, 99, 255, .3);
  color: #c4b8ff;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  transition: background .2s, border-color .2s
}

.pm-book-btn:hover {
  background: rgba(122, 99, 255, .25);
  border-color: rgba(122, 99, 255, .5)
}

/* ════════════════════════════════════════════════════════════
   VENUE CALENDAR MOCK
════════════════════════════════════════════════════════════ */
.venue-mock {
  border-radius: 22px;
  background: rgba(14, 19, 40, 1);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .4);
  overflow: hidden
}

.vm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px
}

.vm-avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(240, 139, 79, .75), rgba(122, 99, 255, .55))
}

.vm-meta {
  flex: 1;
  min-width: 0
}

.vm-name {
  display: block;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 800;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 2px
}

.vm-sub {
  font-size: .73rem;
  color: var(--muted)
}

.vm-cap {
  font-size: .78rem;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap
}

.vm-cap strong {
  color: var(--text)
}

.vm-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 8px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted)
}

.vm-label-icon {
  width: 12px;
  height: 12px;
  color: var(--accent)
}

.vm-slots {
  padding: 0 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.vm-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid transparent
}

.vm-slot.is-booked {
  background: rgba(80, 220, 120, .06);
  border-color: rgba(80, 220, 120, .12)
}

.vm-slot.is-open {
  background: rgba(122, 99, 255, .07);
  border-color: rgba(122, 99, 255, .15)
}

.vm-slot.is-empty {
  background: rgba(255, 255, 255, .02);
  border-color: rgba(255, 255, 255, .07);
  border-style: dashed
}

.vm-slot-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  width: 34px
}

.vm-day {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase
}

.vm-num {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1
}

.vm-slot-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.vm-band {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text)
}

.vm-genre {
  font-size: .72rem;
  color: var(--muted)
}

.vm-pill {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap
}

.vm-pill.confirmed {
  background: rgba(80, 220, 120, .15);
  color: #50dc78
}

.vm-pill.applying {
  background: rgba(122, 99, 255, .18);
  color: #a99fff
}

.vm-pill.post-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(240, 139, 79, .15);
  border: 1px solid rgba(240, 139, 79, .3);
  color: var(--accent);
  cursor: pointer
}

.vm-plus {
  width: 10px;
  height: 10px
}

/* ── Audience responsive ── */
@media (max-width: 960px) {
  .audience-grid {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .venues-grid {
    direction: ltr
  }

  .audience-visual {
    max-width: 520px;
    margin: 0 auto
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding: 72px 0
  }

  .audience-h2 {
    font-size: clamp(1.7rem, 7vw, 2.2rem)
  }
}

/* ════════════════════════════════════════════════════════════
   HOW IT WORKS
════════════════════════════════════════════════════════════ */
.how-section {
  padding: 110px 0;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 110px
}

.how-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 35% at 50% 0%, rgba(122, 99, 255, .07), transparent 55%);
  pointer-events: none
}

/* ── Section header ── */
.how-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 580px;
  margin: 0 auto 70px
}

.how-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px 6px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(240, 139, 79, .16), rgba(240, 139, 79, .05));
  border: 1px solid rgba(240, 139, 79, .34);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 22px
}

.how-eyebrow svg {
  width: 13px;
  height: 13px
}

.how-h2 {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  color: var(--text)
}

.how-h2-accent {
  background: linear-gradient(105deg, var(--accent2) 0%, #c084fc 45%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.how-lead {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.72;
  margin: 0
}

/* ── Steps row ── */
.how-steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 52px
}

/* ── Individual step card ── */
.how-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  cursor: default;
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s,
    border-color .35s
}

/* Per-card glow overlay — fades in on hover */
.how-step::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  border-radius: 24px
}

.how-step:hover {
  transform: translateY(-8px)
}

.how-step:hover::after {
  opacity: 1
}

/* Step 1 — purple accent */
.how-step--1 {
  background: rgba(14, 19, 40, 1)
}

.how-step--1::after {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(122, 99, 255, .06), transparent)
}

.how-step--1:hover {
  border-color: rgba(122, 99, 255, .24);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4)
}

/* Step 2 — indigo */
.how-step--2 {
  background: rgba(14, 19, 40, 1)
}

.how-step--2::after {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160, 100, 240, .05), transparent)
}

.how-step--2:hover {
  border-color: rgba(160, 100, 240, .20);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4)
}

/* Step 3 — orange */
.how-step--3 {
  background: rgba(14, 19, 40, 1)
}

.how-step--3::after {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(240, 139, 79, .06), transparent)
}

.how-step--3:hover {
  border-color: rgba(240, 139, 79, .22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4)
}

/* ── Step number ── */
.how-step-num {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .13)
}

/* ── Icon wrap ── */
.how-step-icon-wrap {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  transition:
    transform .45s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .35s
}

.how-step:hover .how-step-icon-wrap {
  transform: scale(1.12) rotate(-5deg)
}

.how-step-icon-wrap svg {
  width: 26px;
  height: 26px
}

/* Icon colors per step */
.how-step--1 .how-step-icon-wrap {
  background: rgba(122, 99, 255, .12);
  border: 1px solid rgba(122, 99, 255, .28);
  color: #c4b8ff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  animation: iconPulse1 4s ease-in-out infinite
}

.how-step--1:hover .how-step-icon-wrap {
  animation: none;
  box-shadow: 0 4px 16px rgba(122, 99, 255, .22)
}

.how-step--2 .how-step-icon-wrap {
  background: rgba(160, 100, 240, .10);
  border: 1px solid rgba(160, 100, 240, .26);
  color: #d4b8ff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  animation: iconPulse2 4s ease-in-out .8s infinite
}

.how-step--2:hover .how-step-icon-wrap {
  animation: none;
  box-shadow: 0 4px 16px rgba(160, 100, 240, .20)
}

.how-step--3 .how-step-icon-wrap {
  background: rgba(240, 139, 79, .10);
  border: 1px solid rgba(240, 139, 79, .28);
  color: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  animation: iconPulse3 4s ease-in-out 1.6s infinite
}

.how-step--3:hover .how-step-icon-wrap {
  animation: none;
  box-shadow: 0 4px 16px rgba(240, 139, 79, .22)
}

@keyframes iconPulse1 {

  0%,
  100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25)
  }

  50% {
    box-shadow: 0 4px 16px rgba(122, 99, 255, .20)
  }
}

@keyframes iconPulse2 {

  0%,
  100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25)
  }

  50% {
    box-shadow: 0 4px 16px rgba(160, 100, 240, .18)
  }
}

@keyframes iconPulse3 {

  0%,
  100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25)
  }

  50% {
    box-shadow: 0 4px 16px rgba(240, 139, 79, .20)
  }
}

/* ── Step text body ── */
.how-step-body {
  flex: 1
}

.how-step-title {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: var(--text)
}

.how-step-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.72;
  margin: 0 0 22px
}

/* ── Bottom tag pill ── */
.how-step-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: auto
}

.how-step--1 .how-step-tag {
  background: rgba(122, 99, 255, .14);
  border: 1px solid rgba(122, 99, 255, .28);
  color: #a99fff
}

.how-tag--mid {
  background: rgba(160, 100, 240, .12);
  border: 1px solid rgba(160, 100, 240, .26);
  color: #c4b0ff
}

.how-tag--orange {
  background: rgba(240, 139, 79, .13);
  border: 1px solid rgba(240, 139, 79, .28);
  color: var(--accent)
}

/* ── Connector ── */
.how-connector {
  flex-shrink: 0;
  width: 56px;
  padding-top: 62px;
  display: flex;
  align-items: center;
  gap: 3px
}

.how-conn-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(122, 99, 255, .45), rgba(240, 139, 79, .38));
  border-radius: 2px;
  position: relative;
  overflow: visible
}

.how-conn-dot-flow {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent2);
  box-shadow: 0 0 14px rgba(122, 99, 255, .9), 0 0 26px rgba(122, 99, 255, .5);
  animation: connFlow 2.8s ease-in-out 2.2s infinite
}

@keyframes connFlow {
  0% {
    left: 5%;
    opacity: 0;
    background: var(--accent2);
    box-shadow: 0 0 14px rgba(122, 99, 255, .9), 0 0 26px rgba(122, 99, 255, .5)
  }

  15% {
    opacity: 1
  }

  82% {
    opacity: 1
  }

  100% {
    left: 97%;
    opacity: 0;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(240, 139, 79, .9), 0 0 26px rgba(240, 139, 79, .5)
  }
}

.how-conn-arrow {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: rgba(240, 139, 79, .48)
}

/* ── Trust / proof bar ── */
.how-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 18px 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .07)
}

.how-proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .87rem;
  color: var(--muted);
  font-weight: 500
}

.how-proof-icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0
}

.how-proof-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .1)
}

/* ── How It Works responsive ── */
@media (max-width: 880px) {
  .how-steps {
    flex-direction: column;
    gap: 14px
  }

  .how-connector {
    display: none
  }

  .how-proof {
    gap: 16px
  }

  .how-proof-sep {
    display: none
  }
}

@media (max-width: 600px) {
  .how-header {
    margin-bottom: 48px
  }

  .how-h2 {
    font-size: clamp(1.8rem, 7vw, 2.4rem)
  }
}

/* ════════════════════════════════════════════════════════════
  CTA SECTION
════════════════════════════════════════════════════════════ */
.cta-section {
  padding: 80px 0 100px;
  position: relative
}

/* Faint top accent line */
.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122, 99, 255, .30) 35%, rgba(240, 139, 79, .22) 65%, transparent)
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 660px;
  margin: 0 auto;
  padding: 60px 48px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .09)
}

/* Eyebrow */
.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  background: rgba(240, 139, 79, .08);
  border: 1px solid rgba(240, 139, 79, .24);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 28px
}

.cta-eyebrow svg {
  width: 12px;
  height: 12px
}

/* Headline */
.cta-h2 {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  color: var(--text)
}

.cta-h2-accent {
  display: block;
  background: linear-gradient(100deg, var(--accent2) 0%, #c084fc 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* Sub-copy */
.cta-sub {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
  max-width: 44ch;
  margin: 0 0 36px
}

/* Buttons */
.cta-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px
}

.cta-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #ffb16b);
  color: #111;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(240, 139, 79, .25);
  transition: transform .18s, box-shadow .18s, filter .18s
}

.cta-primary-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%);
  background-size: 200% 100%;
  background-position: -200% center;
  animation: shimmerSweep 3s 1.5s ease-in-out infinite
}

.cta-primary-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1)
}

.cta-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(240, 139, 79, .32);
  filter: brightness(1.06)
}

.cta-primary-btn:hover svg {
  transform: translateX(3px)
}

.cta-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--muted);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .18s
}

.cta-ghost-btn svg {
  width: 16px;
  height: 16px;
  color: var(--accent2);
  flex-shrink: 0
}

.cta-ghost-btn:hover {
  border-color: rgba(255, 255, 255, .24);
  color: var(--text);
  transform: translateY(-2px)
}

/* Trust strip */
.cta-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center
}

.cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: rgba(170, 179, 207, .65)
}

.cta-trust-icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
  flex-shrink: 0
}

.cta-trust-sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, .1)
}

@media (max-width: 600px) {
  .cta-inner {
    padding: 40px 24px
  }

  .cta-h2 {
    font-size: clamp(1.9rem, 8vw, 2.4rem)
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%
  }

  .cta-primary-btn,
  .cta-ghost-btn {
    width: 100%;
    justify-content: center
  }

  .cta-trust-sep {
    display: none
  }
}

/* ─── FOOTER ─────────────────────────────────────────── */

.site-footer {
  position: relative;
  padding: 80px 0 0;
  color: var(--muted);
  font-size: .9rem;
  background: var(--bg);
  overflow: hidden;
}

/* faint top ambient */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 20% 0%, rgba(122, 99, 255, .06), transparent),
    radial-gradient(ellipse 40% 30% at 80% 100%, rgba(240, 139, 79, .05), transparent);
  pointer-events: none;
}

/* hairline gradient rule */
.footer-rule {
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(122, 99, 255, .35) 30%,
      rgba(240, 139, 79, .25) 70%,
      transparent);
  margin-bottom: 64px;
}

/* ── 4-col grid ── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px 40px;
  padding-bottom: 60px;
}

/* ── Brand column ── */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  margin-bottom: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.footer-brand span {
  background: linear-gradient(100deg, var(--text) 28%, var(--accent2) 58%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-brand-icon {
  width: 22px;
  height: 22px;
  color: var(--accent2);
  flex-shrink: 0;
}

.footer-tagline {
  font-size: .875rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 280px;
  margin: 0 0 24px;
}

/* social row */
.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-social {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--muted);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.footer-social svg {
  width: 15px;
  height: 15px;
}

.footer-social:hover {
  background: rgba(122, 99, 255, .14);
  border-color: rgba(122, 99, 255, .4);
  color: var(--accent2);
  transform: translateY(-2px);
}

/* ── Nav columns ── */
.footer-col-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 18px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--muted);
  font-size: .875rem;
  transition: color .18s, gap .18s;
}

.footer-links a:hover {
  color: var(--text);
  gap: 10px;
}

/* inline badges */
.footer-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(240, 139, 79, .14);
  border: 1px solid rgba(240, 139, 79, .30);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 999px;
}

/* status indicator */
.footer-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, .6);
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Bottom bar ── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 24px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.footer-copy {
  margin: 0;
  font-size: .825rem;
  color: rgba(170, 179, 207, .55);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-made {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .825rem;
  color: rgba(170, 179, 207, .55);
}

.footer-heart {
  width: 13px;
  height: 13px;
  color: var(--accent);
  fill: var(--accent);
}

.footer-bottom-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .1);
}

.footer-bottom-link {
  text-decoration: none;
  font-size: .8rem;
  color: rgba(170, 179, 207, .55);
  transition: color .18s;
}

.footer-bottom-link:hover {
  color: var(--text);
}

/* ── Footer responsive ── */
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 48px;
  }

  .footer-brand-col .footer-brand {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
  }

  .footer-brand-col .footer-tagline {
    grid-row: 2;
    grid-column: 1;
  }

  .footer-brand-col .footer-socials {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: 56px;
  }

  .footer-rule {
    margin-bottom: 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    display: block;
  }

  .footer-tagline {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-bottom-sep {
    display: none;
  }
}

@media (max-width: 400px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}