@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: #e8e8f2;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(46, 168, 255, 0.23), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(255, 61, 190, 0.22), transparent 30%),
    radial-gradient(circle at 50% 82%, rgba(133, 72, 255, 0.16), transparent 35%),
    linear-gradient(135deg, #02030d 0%, #080816 50%, #0c0618 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
  opacity: 0.38;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 20%, rgba(46,168,255,0.05), transparent 45%),
    linear-gradient(300deg, transparent 30%, rgba(255,61,190,0.05), transparent 60%);
  mix-blend-mode: screen;
  z-index: -1;
}

img.ui-icon,
.nav-icon img {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
  display: inline-block !important;
  flex: 0 0 16px !important;
}

.nav-icon img {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex-basis: 15px !important;
}

a {
  color: inherit;
}

.navbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px));
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(5, 5, 16, 0.62);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  z-index: 20;
  box-shadow: 0 0 34px rgba(46, 168, 255, 0.09);
}

.nav-brand {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 4px;
  background: linear-gradient(90deg, #68cfff, #ff79d4);
  -webkit-background-clip: text;
  color: transparent;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.nav-links a {
  text-decoration: none;
  color: #bfc3d4;
  font-size: 0.95rem;
  font-weight: 500;
}

.nav-links a:hover {
  color: #ffffff;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.nav-book {
  text-decoration: none;
  color: #ff8add;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 61, 190, 0.42);
  background: rgba(255, 61, 190, 0.07);
  box-shadow: 0 0 18px rgba(255, 61, 190, 0.18);
}

.hero,
.page-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 125px 20px 72px;
  text-align: center;
}

.hero-video-bg {
  overflow: hidden;
  background: #050713;
}

.running-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.38;
  z-index: 0;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at center, rgba(10, 12, 30, 0.20), rgba(3, 5, 14, 0.72) 64%, rgba(3, 5, 14, 0.90)),
    linear-gradient(180deg, rgba(3, 5, 14, 0.48), rgba(3, 5, 14, 0.82));
  pointer-events: none;
}

.hero-video-bg .hero-glow,
.hero-video-bg .hero-inner {
  z-index: 2;
}

.page-main {
  padding-top: 70px;
}

.page-hero {
  min-height: 76vh;
}

.compact-page-hero {
  min-height: 55vh;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.38;
  animation: floatGlow 8s ease-in-out infinite alternate;
}

.hero-glow-blue {
  width: 360px;
  height: 360px;
  background: #2ea8ff;
  left: 8%;
  top: 22%;
}

.hero-glow-pink {
  width: 390px;
  height: 390px;
  background: #ff3dbe;
  right: 7%;
  bottom: 16%;
  animation-delay: 1.4s;
}

@keyframes floatGlow {
  from {
    transform: translateY(-14px) scale(1);
  }
  to {
    transform: translateY(18px) scale(1.07);
  }
}

.hero-inner {
  position: relative;
  max-width: 980px;
  padding: 38px 20px;
}

.main-logo {
  width: min(350px, 78vw);
  margin-bottom: 24px;
  filter:
    drop-shadow(0 0 16px rgba(46,168,255,0.48))
    drop-shadow(0 0 24px rgba(255,61,190,0.38));
}

.bio-logo {
  width: min(260px, 68vw);
  margin-bottom: 22px;
  filter:
    drop-shadow(0 0 14px rgba(46,168,255,0.44))
    drop-shadow(0 0 22px rgba(255,61,190,0.34));
}

.eyebrow,
.section-label {
  color: #8fd4ff;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  margin-bottom: 14px;
}

h1 {
  font-size: clamp(3.2rem, 10vw, 7.1rem);
  line-height: 0.92;
  letter-spacing: 4px;
  font-weight: 700;
  background: linear-gradient(90deg, #73d0ff 0%, #f2efff 48%, #ff8ad8 100%);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(255, 61, 190, 0.14);
}

.tagline {
  margin: 24px auto 34px;
  max-width: 760px;
  color: #c5cad8;
  font-size: clamp(1rem, 2.4vw, 1.36rem);
  line-height: 1.6;
  font-weight: 400;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.btn,
.inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 145px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: #f5f6ff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.inline-link {
  margin-top: 26px;
  color: #ff8add;
  min-width: auto;
  border: 1px solid rgba(255, 61, 190, 0.35);
  background: rgba(255, 61, 190, 0.07);
}

.btn-main {
  background: linear-gradient(90deg, #2ea8ff, #ff3dbe);
  box-shadow: 0 0 22px rgba(255, 61, 190, 0.32);
}

.btn-glass {
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.052);
  backdrop-filter: blur(12px);
}

.btn:hover,
.inline-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 26px rgba(46, 168, 255, 0.30);
  border-color: rgba(255,255,255,0.24);
}

.section {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 88px 0;
}

.panel {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.052);
  border-radius: 32px;
  padding: clamp(28px, 5vw, 58px);
  box-shadow:
    0 0 38px rgba(46,168,255,0.10),
    inset 0 0 40px rgba(255,255,255,0.018);
  backdrop-filter: blur(18px);
}

h2 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.08;
  margin-bottom: 22px;
  font-weight: 600;
  color: #f0e8ff;
  letter-spacing: -1px;
}

.body-text {
  color: #bfc6d8;
  font-size: 1.04rem;
  line-height: 1.85;
  max-width: 850px;
  font-weight: 400;
}

.center {
  text-align: center;
}

.services-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.service-card,
.bio-card,
.highlight-card {
  position: relative;
  min-height: 220px;
  padding: 26px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.085), rgba(255,255,255,0.032));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 28px rgba(46,168,255,0.08);
}

.service-card::before,
.bio-card::before,
.highlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,61,190,0.14), transparent 40%);
}

.service-card span,
.service-card h3,
.service-card p,
.bio-card h3,
.bio-card p,
.highlight-card {
  position: relative;
}

.service-card span {
  display: block;
  color: #ff8add;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 24px;
}

.service-card h3,
.bio-card h3 {
  color: #f1f1f8;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.service-card p,
.bio-card p {
  color: #aeb4c7;
  line-height: 1.65;
  font-size: 0.95rem;
  font-weight: 400;
}

.bio-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.bio-card {
  min-height: 150px;
  text-align: center;
}

.highlight-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.highlight-card {
  min-height: 110px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #f1f1f8;
  font-weight: 600;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.placeholder-card {
  position: relative;
  min-height: 260px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)),
    radial-gradient(circle at 20% 20%, rgba(46,168,255,0.18), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(255,61,190,0.16), transparent 36%);
  box-shadow: 0 0 34px rgba(46,168,255,0.09);
  backdrop-filter: blur(16px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.placeholder-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 38px rgba(255,61,190,0.14);
}

.placeholder-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.12), transparent 45%);
  transform: translateX(-100%);
  animation: placeholderShine 5s ease-in-out infinite;
}

@keyframes placeholderShine {
  0%, 55% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.photo-placeholder::after {
  content: "Photo Placeholder";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c5cad8;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.video-placeholder:not(.has-video)::after {
  content: "Video Placeholder";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c5cad8;
  font-weight: 600;
  letter-spacing: 0.5px;
}


.video-placeholder.has-video {
  background: #050814;
}

.video-placeholder.has-video::after,
.video-placeholder.has-video .placeholder-shine,
.video-placeholder.has-video .play-mark {
  display: none;
}

.video-player {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: contain;
  border-radius: 28px;
  background: #050814;
}

.play-mark {
  position: absolute;
  width: 54px;
  height: 54px;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
}

.play-mark::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 16px;
  border-left: 16px solid rgba(255,255,255,0.78);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.contact-section {
  padding-bottom: 100px;
}

.contact-panel {
  text-align: center;
}

.contact-panel .body-text {
  margin-left: auto;
  margin-right: auto;
}

.contact-links {
  margin-top: 32px;
  display: grid;
  gap: 14px;
  justify-content: center;
}

.contact-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  color: #e7e8f4;
  padding: 13px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.062);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 500;
}

.contact-links a:hover {
  border-color: rgba(255,61,190,0.62);
}

.floating-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ea8ff, #ff3dbe);
  box-shadow: 0 0 24px rgba(255, 61, 190, 0.38);
}

footer {
  padding: 30px 20px;
  text-align: center;
  color: #8f93a8;
  border-top: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 980px) {
  .services-grid,
  .highlight-grid,
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card:last-child,
  .highlight-card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .navbar {
    top: 10px;
    border-radius: 24px;
    grid-template-columns: auto auto;
  }

  .nav-links {
    order: 3;
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  .nav-actions {
    justify-content: flex-end;
  }

  .nav-book {
    display: none;
  }

  .hero {
    padding-top: 155px;
  }

  .services-grid,
  .bio-grid,
  .highlight-grid,
  .media-grid {
    grid-template-columns: 1fr;
  }

  .service-card:last-child,
  .highlight-card:last-child {
    grid-column: auto;
  }

  .placeholder-card {
    min-height: 220px;
  }

  .floating-whatsapp {
    right: 12px;
    bottom: 12px;
    font-size: 0.88rem;
  }
}


/* JPAG v8 biography member photo cards */
.members-section {
  width: min(1350px, calc(100% - 32px));
}

.members-intro {
  color: #c5cad8;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 780px;
  margin: -5px auto 42px;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.member-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 26px 24px 36px;
  min-height: 430px;
  text-align: center;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    radial-gradient(circle at 20% 0%, rgba(46,168,255,0.14), transparent 34%),
    radial-gradient(circle at 80% 100%, rgba(255,61,190,0.15), transparent 40%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 34px rgba(46,168,255,0.10);
  backdrop-filter: blur(18px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.member-card:nth-child(odd) {
  border-color: rgba(255,61,190,0.42);
}

.member-card:nth-child(even) {
  border-color: rgba(46,168,255,0.42);
}

.member-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 0 40px rgba(255,61,190,0.16);
}

.member-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)),
    radial-gradient(circle at 20% 20%, rgba(46,168,255,0.20), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(255,61,190,0.20), transparent 36%);
  border: 1px solid rgba(255,255,255,0.12);
}

.placeholder-member-photo::after {
  content: "Photo Placeholder";
  height: 100%;
  display: grid;
  place-items: center;
  color: #c5cad8;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.member-card h3 {
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.member-line {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #ff3dbe;
  margin: 0 auto 18px;
  box-shadow: 0 0 18px rgba(255,61,190,0.70);
}

.blue-line {
  background: #2ea8ff;
  box-shadow: 0 0 18px rgba(46,168,255,0.70);
}

.member-card p {
  color: #bfc6d8;
  font-size: 1.05rem;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .member-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .member-card {
    min-height: auto;
  }
}


/* JPAG v9 actual member photos - Option B */
.photo-member-card {
  padding: 0;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.photo-member-card .member-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 30px 30px 0 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: #090914;
}

.actual-member-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.photo-member-card .member-info {
  position: relative;
  padding: 26px 22px 34px;
  background:
    linear-gradient(180deg, rgba(5,5,16,0.75), rgba(5,5,16,0.96)),
    radial-gradient(circle at 50% 0%, rgba(255,61,190,0.16), transparent 48%);
}

.photo-member-card h3 {
  margin-bottom: 12px;
}

.photo-member-card .member-line {
  margin-bottom: 16px;
}

@media (max-width: 720px) {
  .photo-member-card {
    min-height: auto;
  }

  .photo-member-card .member-photo {
    aspect-ratio: 4 / 5;
  }
}


/* JPAG v11 biography photo blend + final member order */
/* Final order in biography.html: Jazz, Phoebe, Wero, Gerald */

.photo-member-card {
  padding: 0;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)),
    radial-gradient(circle at 30% 0%, rgba(46,168,255,0.12), transparent 42%),
    radial-gradient(circle at 70% 100%, rgba(255,61,190,0.16), transparent 44%);
}

.photo-member-card .member-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 30px 30px 0 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: #080812;
}

.actual-member-photo {
  position: relative;
  overflow: hidden;
}

.actual-member-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(46,168,255,0.18), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(255,61,190,0.16), transparent 36%),
    linear-gradient(180deg, rgba(3,4,15,0.05), rgba(3,4,15,0.28));
  mix-blend-mode: screen;
}

.actual-member-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 -90px 90px rgba(5,5,16,0.68);
}

.actual-member-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.98) contrast(1.03) brightness(0.92);
  transform: scale(1.01);
  transition: transform 0.35s ease, filter 0.35s ease;
}

.photo-member-card:hover .actual-member-photo img {
  transform: scale(1.055);
  filter: saturate(1.08) contrast(1.06) brightness(0.98);
}

.pink-photo {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,61,190,0.26), transparent 36%),
    #080812;
}

.blue-photo {
  background:
    radial-gradient(circle at 20% 20%, rgba(46,168,255,0.26), transparent 36%),
    #080812;
}

.photo-member-card .member-info {
  position: relative;
  padding: 28px 22px 36px;
  margin-top: -1px;
  background:
    linear-gradient(180deg, rgba(5,5,16,0.78), rgba(5,5,16,0.98)),
    radial-gradient(circle at 50% 0%, rgba(255,61,190,0.16), transparent 48%);
}

.photo-member-card:nth-child(3) .member-info,
.photo-member-card:nth-child(4) .member-info {
  background:
    linear-gradient(180deg, rgba(5,5,16,0.78), rgba(5,5,16,0.98)),
    radial-gradient(circle at 50% 0%, rgba(46,168,255,0.16), transparent 48%);
}

.photo-member-card h3 {
  margin-bottom: 12px;
}

.photo-member-card .member-line {
  margin-bottom: 16px;
}

@media (max-width: 720px) {
  .photo-member-card {
    min-height: auto;
  }

  .photo-member-card .member-photo {
    aspect-ratio: 4 / 5;
  }
}


/* JPAG v13 biography cards - real photos fitted cleanly into frame */
.members-section {
  width: min(1380px, calc(100% - 32px));
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
}

.photo-member-card {
  padding: 0;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    radial-gradient(circle at 50% 0%, rgba(255,61,190,0.12), transparent 48%),
    #070812;
}

.photo-member-card .member-photo {
  width: 100%;
  height: 400px;
  margin: 0;
  border-radius: 30px 30px 0 0;
  border: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(46,168,255,0.18), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(255,61,190,0.16), transparent 36%),
    #050611;
}

.actual-member-photo {
  position: relative;
  overflow: hidden;
}

.actual-member-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.03) brightness(0.96);
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* Individual photo fitting */
.photo-jazz img {
  object-position: center 36%;
}

.photo-phoebe img {
  object-position: center 38%;
}

.photo-wero img {
  object-position: center 34%;
}

.photo-gerald img {
  object-position: center 34%;
}

.actual-member-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,16,0) 62%, rgba(5,5,16,0.78) 100%),
    radial-gradient(circle at 15% 15%, rgba(255,61,190,0.10), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(46,168,255,0.10), transparent 40%);
}

.photo-member-card:hover .actual-member-photo img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.05) brightness(1.0);
}

.photo-member-card .member-info {
  padding: 28px 22px 36px;
  background:
    linear-gradient(180deg, rgba(5,5,16,0.82), rgba(5,5,16,0.98)),
    radial-gradient(circle at 50% 0%, rgba(255,61,190,0.13), transparent 48%);
  flex: 1;
}

.photo-member-card:nth-child(3) .member-info,
.photo-member-card:nth-child(4) .member-info {
  background:
    linear-gradient(180deg, rgba(5,5,16,0.82), rgba(5,5,16,0.98)),
    radial-gradient(circle at 50% 0%, rgba(46,168,255,0.13), transparent 48%);
}

@media (max-width: 1100px) {
  .member-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-member-card .member-photo {
    height: 440px;
  }
}

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

  .photo-member-card {
    min-height: auto;
  }

  .photo-member-card .member-photo {
    height: 430px;
  }
}


/* JPAG v14 biography SVG member images */
.bio-svg-photo {
  width: 100%;
  height: 400px;
  margin: 0;
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  border: 0;
  background: #050611;
}

.bio-svg-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: none !important;
  transform: none !important;
}

.photo-member-card:hover .bio-svg-photo img {
  transform: scale(1.025) !important;
  transition: transform 0.35s ease;
}

.bio-svg-photo::after,
.bio-svg-photo::before {
  display: none !important;
}

@media (max-width: 1100px) {
  .bio-svg-photo {
    height: 440px;
  }
}

@media (max-width: 720px) {
  .bio-svg-photo {
    height: 430px;
  }
}


/* JPAG v16 - blend Bio SVG white backgrounds into neon theme */
.bio-svg-photo {
  position: relative;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 61, 190, 0.38), transparent 38%),
    radial-gradient(circle at 85% 22%, rgba(46, 168, 255, 0.38), transparent 42%),
    linear-gradient(135deg, #050611 0%, #0b1230 45%, #18071d 100%) !important;
}

.bio-svg-photo img {
  mix-blend-mode: multiply;
  filter: contrast(1.08) saturate(1.08) brightness(0.98) !important;
}

.bio-svg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(5, 5, 16, 0.78) 100%),
    radial-gradient(circle at 15% 18%, rgba(255, 61, 190, 0.22), transparent 42%),
    radial-gradient(circle at 85% 18%, rgba(46, 168, 255, 0.22), transparent 42%);
}

.photo-member-card {
  box-shadow:
    0 0 24px rgba(46, 168, 255, 0.14),
    0 0 24px rgba(255, 61, 190, 0.10) !important;
}

.photo-member-card:nth-child(1),
.photo-member-card:nth-child(2) {
  border-color: rgba(255, 61, 190, 0.55) !important;
}

.photo-member-card:nth-child(3),
.photo-member-card:nth-child(4) {
  border-color: rgba(46, 168, 255, 0.55) !important;
}


/* JPAG v22 - clean biography rebuild with new PNG photos
   No blending, no overlays, no filters, no old SVG bio images. */

.members-section {
  width: min(1350px, calc(100% - 32px));
}

.members-intro {
  color: #c5cad8;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 780px;
  margin: -5px auto 42px;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.clean-member-card {
  padding: 0 !important;
  min-height: 560px;
  overflow: hidden;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(5,5,16,0.92) !important;
  box-shadow: 0 0 32px rgba(46,168,255,0.10);
}

.clean-member-card.pink-card {
  border: 1px solid rgba(255,61,190,0.55) !important;
  box-shadow: 0 0 26px rgba(255,61,190,0.13);
}

.clean-member-card.blue-card {
  border: 1px solid rgba(46,168,255,0.55) !important;
  box-shadow: 0 0 26px rgba(46,168,255,0.13);
}

.clean-member-photo,
.member-photo,
.actual-member-photo,
.bio-member-photo,
.member-image,
.bio-photo {
  position: relative !important;
  width: 100% !important;
  height: 430px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 30px 30px 0 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.clean-member-photo::before,
.clean-member-photo::after,
.member-photo::before,
.member-photo::after,
.actual-member-photo::before,
.actual-member-photo::after,
.bio-member-photo::before,
.bio-member-photo::after,
.member-image::before,
.member-image::after,
.bio-photo::before,
.bio-photo::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

.clean-member-photo img,
.member-photo img,
.actual-member-photo img,
.bio-member-photo img,
.member-image img,
.bio-photo img,
img[src="Jazz.png"],
img[src="Phoebe.png"],
img[src="Wero.png"],
img[src="Gerald.png"] {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  background: transparent !important;
}

.clean-member-card:hover .clean-member-photo img,
.member-card:hover .member-photo img,
.photo-member-card:hover .actual-member-photo img {
  filter: none !important;
  transform: none !important;
}

.clean-member-card .member-info {
  padding: 28px 22px 36px !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(5,5,16,0.82), rgba(5,5,16,0.98)) !important;
}

.clean-member-card h3 {
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.member-line {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #ff3dbe;
  margin: 0 auto 18px;
  box-shadow: 0 0 18px rgba(255,61,190,0.70);
}

.blue-line {
  background: #2ea8ff;
  box-shadow: 0 0 18px rgba(46,168,255,0.70);
}

.clean-member-card p {
  color: #bfc6d8;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Keep UI icons small */
img.ui-icon,
.nav-icon img,
.contact-links img {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
  flex: 0 0 16px !important;
}

.nav-icon img {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex: 0 0 15px !important;
}

@media (max-width: 1100px) {
  .member-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 720px) {
  .member-grid {
    grid-template-columns: 1fr !important;
  }

  .clean-member-card {
    min-height: auto !important;
  }

  .clean-member-photo,
  .member-photo,
  .actual-member-photo,
  .bio-member-photo,
  .member-image,
  .bio-photo {
    height: 410px !important;
  }
}


/* JPAG v23 - Biography title update */
.meet-band-title {
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 36px;
  color: #f5f0ff;
  letter-spacing: -2px;
  line-height: 0.95;
  text-shadow:
    0 0 20px rgba(255, 61, 190, 0.14),
    0 0 24px rgba(46, 168, 255, 0.10);
}

/* Subtle professional hover animation for member cards */
.clean-member-card {
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease !important;
}

.clean-member-card:hover {
  transform: translateY(-8px) !important;
}

.clean-member-card.pink-card:hover {
  border-color: rgba(255, 61, 190, 0.92) !important;
  box-shadow:
    0 0 28px rgba(255, 61, 190, 0.28),
    0 0 42px rgba(46, 168, 255, 0.08) !important;
}

.clean-member-card.blue-card:hover {
  border-color: rgba(46, 168, 255, 0.92) !important;
  box-shadow:
    0 0 28px rgba(46, 168, 255, 0.28),
    0 0 42px rgba(255, 61, 190, 0.08) !important;
}

.clean-member-card .member-info h3 {
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
}

.clean-member-card:hover .member-info h3 {
  color: #ffffff !important;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.20),
    0 0 20px rgba(255, 61, 190, 0.12) !important;
}

@media (max-width: 720px) {
  .meet-band-title {
    font-size: clamp(3.2rem, 14vw, 5rem);
    letter-spacing: -1px;
  }
}


/* JPAG v24 - nicer Biography title font */
.meet-band-title {
  font-family: 'Bebas Neue', Arial, Helvetica, sans-serif !important;
  font-size: clamp(5rem, 9vw, 8rem) !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
  line-height: 0.95 !important;
  margin-bottom: 52px !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #67cfff 0%, #f5f0ff 46%, #ff6edb 100%) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  text-shadow:
    0 0 18px rgba(46, 168, 255, 0.18),
    0 0 22px rgba(255, 61, 190, 0.16) !important;
}

/* Remove extra spacing left by deleted intro sentence */
.members-section .members-intro {
  display: none !important;
}

@media (max-width: 720px) {
  .meet-band-title {
    font-size: clamp(4rem, 18vw, 6rem) !important;
    letter-spacing: 2px !important;
    margin-bottom: 36px !important;
  }
}

/* JPAG v34 - homepage popout background now uses looping animated member GIFs */
.hero-pop-bg {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(46, 168, 255, 0.20), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(255, 61, 190, 0.18), transparent 34%),
    radial-gradient(circle at 50% 78%, rgba(107, 76, 255, 0.16), transparent 38%),
    linear-gradient(135deg, #061325 0%, #090713 46%, #1a0622 100%);
}

.popout-character-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.popout-character {
  position: absolute;
  width: clamp(110px, 11vw, 190px);
  aspect-ratio: 1 / 1;
  background-image: url("Jazz Animated.gif");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  filter:
    drop-shadow(0 0 18px rgba(46, 168, 255, 0.35))
    drop-shadow(0 0 22px rgba(255, 61, 190, 0.24));
  transform: translateX(-160px) scale(0.72) rotate(-5deg);
  animation: popRunAcross 18s linear infinite;
}

.popout-1 { top: 18%; left: -12%; animation-delay: 0s; }
.popout-2 { top: 34%; left: -14%; animation-delay: 4.3s; width: clamp(70px, 7vw, 118px); }
.popout-3 { top: 58%; left: -18%; animation-delay: 8.6s; width: clamp(96px, 10vw, 170px); }
.popout-4 { top: 24%; left: -15%; animation-delay: 12.9s; width: clamp(62px, 6.5vw, 105px); }
.popout-5 { top: 71%; left: -20%; animation-delay: 2.1s; width: clamp(76px, 8vw, 132px); }
.popout-6 { top: 45%; left: -17%; animation-delay: 10.7s; width: clamp(88px, 8.8vw, 145px); }

@keyframes popRunAcross {
  0% {
    opacity: 0;
    transform: translateX(-180px) translateY(18px) scale(0.62) rotate(-7deg);
  }
  8% {
    opacity: 0.18;
  }
  18% {
    opacity: 0.34;
    transform: translateX(18vw) translateY(-8px) scale(0.82) rotate(4deg);
  }
  42% {
    opacity: 0.22;
    transform: translateX(54vw) translateY(12px) scale(0.70) rotate(-3deg);
  }
  62% {
    opacity: 0.30;
    transform: translateX(88vw) translateY(-10px) scale(0.88) rotate(5deg);
  }
  74% {
    opacity: 0;
    transform: translateX(116vw) translateY(16px) scale(0.60) rotate(-6deg);
  }
  100% {
    opacity: 0;
    transform: translateX(116vw) translateY(16px) scale(0.60) rotate(-6deg);
  }
}

.hero-pop-bg .hero-glow,
.hero-pop-bg .hero-inner {
  z-index: 2;
}

.hero-pop-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(3, 5, 14, 0.08), rgba(3, 5, 14, 0.58) 68%, rgba(3, 5, 14, 0.82)),
    linear-gradient(180deg, rgba(3, 5, 14, 0.22), rgba(3, 5, 14, 0.68));
}

@media (max-width: 720px) {
  .popout-character {
    width: clamp(60px, 18vw, 96px);
  }

  .popout-1 { top: 16%; }
  .popout-2 { top: 30%; }
  .popout-3 { top: 66%; }
  .popout-4 { top: 48%; }
  .popout-5 { top: 78%; }
  .popout-6 { top: 38%; }
}


.member-animation{
display:block;
width:140px;
margin:12px auto 0;
border-radius:12px;
pointer-events:none;
background:transparent;
}

/* JPAG v35 - all 4 homepage GIFs + neon glassmorphism member cards */
.popout-character {
  background-image: none !important;
  opacity: 0;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 14px rgba(255, 61, 190, 0.42))
    drop-shadow(0 0 18px rgba(46, 168, 255, 0.35));
}

.popout-1,
.popout-5 {
  background-image: url("Jazz Animated.gif") !important;
}

.popout-2,
.popout-6 {
  background-image: url("Phoebe Animated.gif") !important;
}

.popout-3 {
  background-image: url("Wero Animated.gif") !important;
}

.popout-4 {
  background-image: url("Gerald Animated.gif") !important;
}

.popout-1 { top: 14%; left: -14%; animation-delay: 0s; animation-duration: 22s; width: clamp(78px, 8vw, 138px); }
.popout-2 { top: 32%; left: -18%; animation-delay: 3.5s; animation-duration: 24s; width: clamp(72px, 7.5vw, 128px); }
.popout-3 { top: 54%; left: -16%; animation-delay: 7s; animation-duration: 21s; width: clamp(84px, 8.8vw, 150px); }
.popout-4 { top: 70%; left: -20%; animation-delay: 10.5s; animation-duration: 23s; width: clamp(80px, 8.5vw, 145px); }
.popout-5 { top: 43%; left: -22%; animation-delay: 14s; animation-duration: 26s; width: clamp(60px, 6.5vw, 112px); }
.popout-6 { top: 20%; left: -18%; animation-delay: 17s; animation-duration: 25s; width: clamp(62px, 6.8vw, 118px); }

.hero-pop-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 61, 190, 0.10), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(46, 168, 255, 0.10), transparent 42%);
}

.clean-member-card {
  position: relative !important;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.02)),
    rgba(8, 9, 24, 0.56) !important;
  border-radius: 32px !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  overflow: hidden !important;
}

.clean-member-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.28), transparent 23%, transparent 70%, rgba(255,255,255,0.06)),
    radial-gradient(circle at 28% 0%, rgba(255, 61, 190, 0.16), transparent 30%),
    radial-gradient(circle at 78% 12%, rgba(46, 168, 255, 0.14), transparent 34%);
  opacity: 0.88;
}

.clean-member-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  pointer-events: none;
  border-radius: 31px;
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.055);
}

.clean-member-card.pink-card {
  border: 1px solid rgba(255, 61, 190, 0.70) !important;
  box-shadow:
    0 0 24px rgba(255, 61, 190, 0.18),
    0 0 54px rgba(255, 61, 190, 0.09),
    inset 0 0 28px rgba(255, 61, 190, 0.04) !important;
}

.clean-member-card.blue-card {
  border: 1px solid rgba(46, 168, 255, 0.72) !important;
  box-shadow:
    0 0 24px rgba(46, 168, 255, 0.18),
    0 0 54px rgba(46, 168, 255, 0.09),
    inset 0 0 28px rgba(46, 168, 255, 0.04) !important;
}

.clean-member-card .member-info {
  position: relative;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(5, 5, 16, 0.52), rgba(5, 5, 16, 0.88)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.clean-member-card h3 {
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.16),
    0 0 20px rgba(255, 61, 190, 0.14);
}

.clean-member-card.blue-card h3 {
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.16),
    0 0 20px rgba(46, 168, 255, 0.16);
}

.clean-member-photo,
.member-photo {
  position: relative !important;
  z-index: 3 !important;
}

.member-animation {
  width: clamp(92px, 8.5vw, 142px) !important;
  margin-top: 18px !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 18px rgba(255, 61, 190, 0.15),
    0 0 22px rgba(46, 168, 255, 0.12);
}

@media (max-width: 720px) {
  .popout-character {
    width: clamp(54px, 16vw, 88px) !important;
  }

  .member-animation {
    width: 118px !important;
  }
}


/* JPAG v36 - global animated GIF background + cursor spotlight */
.site-character-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.70;
}

.site-float-char {
  position: absolute;
  width: clamp(72px, 8vw, 138px);
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 16px rgba(255, 61, 190, 0.38))
    drop-shadow(0 0 22px rgba(46, 168, 255, 0.30));
  animation: siteCharacterDrift 24s linear infinite;
}

.site-float-jazz {
  background-image: url("Jazz Animated.gif");
  top: 15%;
  left: -14%;
  width: clamp(78px, 8.5vw, 148px);
  animation-delay: 0s;
  animation-duration: 25s;
}

.site-float-phoebe {
  background-image: url("Phoebe Animated.gif");
  top: 38%;
  left: -18%;
  width: clamp(72px, 8vw, 136px);
  animation-delay: 5.5s;
  animation-duration: 27s;
}

.site-float-wero {
  background-image: url("Wero Animated.gif");
  top: 61%;
  left: -16%;
  width: clamp(84px, 9vw, 154px);
  animation-delay: 11s;
  animation-duration: 24s;
}

.site-float-gerald {
  background-image: url("Gerald Animated.gif");
  top: 76%;
  left: -20%;
  width: clamp(80px, 8.5vw, 146px);
  animation-delay: 16.5s;
  animation-duration: 26s;
}

@keyframes siteCharacterDrift {
  0% {
    opacity: 0;
    transform: translateX(-160px) translateY(16px) scale(0.70) rotate(-5deg);
  }
  10% { opacity: 0.22; }
  25% {
    opacity: 0.34;
    transform: translateX(25vw) translateY(-12px) scale(0.88) rotate(4deg);
  }
  52% {
    opacity: 0.24;
    transform: translateX(62vw) translateY(18px) scale(0.76) rotate(-3deg);
  }
  74% {
    opacity: 0.32;
    transform: translateX(104vw) translateY(-10px) scale(0.92) rotate(5deg);
  }
  86%, 100% {
    opacity: 0;
    transform: translateX(122vw) translateY(14px) scale(0.66) rotate(-6deg);
  }
}

/* Hide the older homepage-only popout layer so the new global background handles all pages */
.hero-pop-bg .popout-character-layer {
  display: none !important;
}

.cursor-spotlight {
  position: fixed;
  width: 420px;
  height: 420px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 87, 216, 0.50) 0%, rgba(46, 168, 255, 0.30) 25%, rgba(133, 72, 255, 0.16) 48%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(18px);
  transition: opacity 0.18s ease;
}

.cursor-spotlight.is-active {
  opacity: 0.85;
}

.navbar,
.hero,
.page-main,
main,
footer {
  position: relative;
  z-index: 2;
}

@media (hover: none), (max-width: 768px) {
  .cursor-spotlight {
    display: none;
  }

  .site-character-bg {
    opacity: 0.46;
  }

  .site-float-char {
    width: clamp(56px, 17vw, 92px) !important;
  }
}

/* JPAG v38 - make Home and Contact transparent so animated GIF background shows through */
.hero-pop-bg,
.hero {
  background: transparent !important;
}

.hero-pop-bg::before,
.hero-pop-bg::after {
  opacity: 0.22 !important;
  background: transparent !important;
}

.hero-glow {
  opacity: 0.28 !important;
}

.hero-inner {
  background: transparent !important;
}

#contact.contact-section,
.contact-section {
  background: transparent !important;
}

.contact-panel,
#contact .panel,
.panel.contact-panel {
  background: rgba(5, 5, 16, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 0 28px rgba(46, 168, 255, 0.08),
    0 0 28px rgba(255, 61, 190, 0.06),
    inset 0 0 28px rgba(255, 255, 255, 0.012) !important;
}

.contact-links a {
  background: rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.site-character-bg {
  opacity: 0.78 !important;
}

/* JPAG v39 - smooth transitions between internal pages */
html {
  scroll-behavior: smooth;
}

html.js body {
  opacity: 0;
  transform: translateY(8px) scale(0.995);
  filter: blur(2px);
  transition:
    opacity 0.34s ease,
    transform 0.34s ease,
    filter 0.34s ease;
}

html.js body.page-ready {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

html.js body.page-leaving {
  opacity: 0;
  transform: translateY(-6px) scale(0.992);
  filter: blur(3px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js body,
  html.js body.page-ready,
  html.js body.page-leaving {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* JPAG v40 - interactive setlist builder */
.setlist-hero {
  min-height: 48vh;
}

.setlist-section {
  padding-top: 28px;
}

.setlist-intro {
  max-width: 680px;
  margin: 0 auto 34px;
  text-align: center;
}

.setlist-intro .body-text {
  margin-top: 14px;
}

.setlist-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: start;
}

.glass-panel {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  background: rgba(6, 7, 21, 0.61);
  box-shadow: 0 0 36px rgba(46, 168, 255, 0.08), 0 0 36px rgba(255, 61, 190, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.song-search label,
.manual-song-form label,
.send-setlist-form label {
  display: block;
  margin-bottom: 9px;
  color: #f4f3fb;
  font-size: 0.92rem;
  font-weight: 700;
}

.search-input-row {
  display: flex;
  gap: 10px;
}

.song-search input,
.manual-song-form input,
.send-setlist-form input,
.send-setlist-form select {
  width: 100%;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  outline: none;
  color: #f5f4fb;
  font: inherit;
  background: rgba(255, 255, 255, 0.06);
}

.send-setlist-form select {
  color-scheme: normal;
}

.send-setlist-form select option {
  color: #151622;
  background: #ffffff;
}

.song-search input:focus,
.manual-song-form input:focus,
.send-setlist-form input:focus,
.send-setlist-form select:focus {
  border-color: #68cfff;
  box-shadow: 0 0 0 3px rgba(46, 168, 255, 0.18);
}

.setlist-button,
.add-song,
.text-button,
.song-controls button {
  font: inherit;
  cursor: pointer;
}

.setlist-button {
  flex: 0 0 auto;
  padding: 13px 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 800;
}

.setlist-button-primary {
  color: #ffffff;
  background: linear-gradient(100deg, #2ea8ff, #b25cf6 48%, #ff3dbe);
  box-shadow: 0 0 20px rgba(130, 79, 242, 0.32);
}

.setlist-button-secondary {
  width: 100%;
  margin-top: 15px;
  color: #bceaff;
  border-color: rgba(46, 168, 255, 0.45);
  background: rgba(46, 168, 255, 0.09);
}

.setlist-button:disabled,
.text-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.search-status,
.setlist-help {
  margin: 15px 0;
  color: #aeb4c9;
  font-size: 0.9rem;
  line-height: 1.5;
}

.search-results {
  display: grid;
  gap: 9px;
}

.search-result,
.setlist-song {
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.045);
}

.search-result {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  padding: 8px;
  border-radius: 15px;
  cursor: grab;
}

.song-artwork {
  display: grid;
  width: 48px;
  height: 48px;
  overflow: hidden;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #2ea8ff, #ff3dbe);
}

.song-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.song-artwork-fallback {
  font-size: 1.4rem;
}

.search-result h3,
.setlist-song strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result p,
.setlist-song small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #abb2c9;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-song {
  padding: 8px 11px;
  border: 1px solid rgba(255, 61, 190, 0.52);
  border-radius: 9px;
  color: #ff9de4;
  font-size: 0.83rem;
  font-weight: 800;
  background: rgba(255, 61, 190, 0.1);
}

.add-song:disabled {
  cursor: default;
  opacity: 0.55;
}

.manual-song-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-top: 25px;
  padding-top: 23px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.manual-song-form .manual-heading,
.manual-song-form .setlist-button {
  grid-column: 1 / -1;
}

.manual-field label {
  display: block;
}

.manual-heading {
  margin-bottom: 4px;
  color: #f6f2ff;
  font-weight: 800;
}

.setlist-builder-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.setlist-builder-head h2 {
  margin-top: 4px;
  color: #ffffff;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.setlist-builder-head h2 span {
  margin-left: 7px;
  color: #9ca5c3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
}

.text-button {
  padding: 4px 0;
  border: 0;
  color: #ff96d9;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.setlist-items {
  display: grid;
  gap: 9px;
  min-height: 132px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setlist-empty {
  display: grid;
  min-height: 132px;
  place-items: center;
  padding: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  color: #99a1ba;
  text-align: center;
}

.setlist-song {
  grid-template-columns: 26px 42px minmax(0, 1fr) auto;
  padding: 7px;
  border-radius: 14px;
  cursor: grab;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.setlist-song.is-dragging { opacity: 0.42; }
.search-result.is-dragging { opacity: 0.42; }
.setlist-song.is-drag-over { border-color: #68cfff; transform: translateY(2px); }
.setlist-song .song-artwork { width: 42px; height: 42px; }

.song-position {
  color: #7bd5ff;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.song-controls {
  display: flex;
  gap: 4px;
}

.song-controls button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: #dce0ef;
  background: rgba(255, 255, 255, 0.07);
}

.song-controls button:disabled { cursor: not-allowed; opacity: 0.35; }
.song-controls .song-remove { color: #ff9cdf; }

.send-setlist-form {
  margin-top: 23px;
  padding-top: 23px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.send-setlist-form label span {
  color: #a5abc0;
  font-weight: 400;
}

.send-setlist-form .setlist-button { width: 100%; margin-top: 12px; }

.honeypot-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.send-status {
  min-height: 1.35em;
  margin-top: 10px;
  color: #aeb6c9;
  font-size: 0.85rem;
  text-align: center;
}

.send-fallback {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.send-fallback[hidden] {
  display: none;
}

.send-fallback a,
.send-fallback button {
  padding: 8px 11px;
  border: 1px solid rgba(125, 207, 255, 0.3);
  border-radius: 9px;
  color: #bceaff;
  font: inherit;
  font-size: 0.84rem;
  text-decoration: none;
  background: rgba(46, 168, 255, 0.08);
  cursor: pointer;
}

/* JPAG v50 - flip-card gallery */
.gallery-intro {
  max-width: 560px;
  margin: 0 auto 28px;
  color: #abb4c8;
  line-height: 1.65;
  text-align: center;
}

.flip-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.gallery-flip-card {
  min-height: 330px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  perspective: 1200px;
}

.gallery-flip-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.gallery-flip-card:hover .gallery-flip-inner,
.gallery-flip-card.is-flipped .gallery-flip-inner {
  transform: rotateY(180deg);
}

.gallery-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gallery-flip-front {
  background: #111326;
}

.gallery-flip-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(5, 6, 16, 0.88));
}

.gallery-flip-front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-flip-card:hover .gallery-flip-front img {
  transform: scale(1.05);
}

.gallery-flip-label,
.gallery-flip-prompt,
.gallery-flip-back > * {
  position: relative;
  z-index: 1;
}

.gallery-flip-label {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
}

.gallery-flip-prompt {
  margin-top: 7px;
  color: #9fdbff;
  font-size: 0.82rem;
  font-weight: 700;
}

.gallery-flip-back {
  justify-content: center;
  gap: 15px;
  background:
    radial-gradient(circle at 12% 12%, rgba(46, 168, 255, 0.30), transparent 37%),
    radial-gradient(circle at 85% 86%, rgba(255, 61, 190, 0.26), transparent 42%),
    #111226;
  transform: rotateY(180deg);
}

.gallery-card-number {
  color: #91d9ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.gallery-flip-back strong {
  color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.12;
}

.gallery-flip-back span:last-child {
  max-width: 290px;
  color: #c0c6d8;
  line-height: 1.65;
}

@media (max-width: 680px) {
  .flip-gallery { grid-template-columns: 1fr; }
  .gallery-flip-card,
  .gallery-flip-inner { min-height: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-flip-inner,
  .gallery-flip-front img { transition: none; }
}

@media (max-width: 860px) {
  .setlist-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .setlist-hero { min-height: 43vh; }
  .search-input-row { flex-direction: column; }
  .manual-song-form { grid-template-columns: 1fr; }
  .manual-song-form .manual-heading,
  .manual-song-form .setlist-button { grid-column: auto; }
  .setlist-song { grid-template-columns: 23px 38px minmax(0, 1fr); }
  .setlist-song .song-artwork { width: 38px; height: 38px; }
  .song-controls { grid-column: 3; justify-content: flex-end; }
}

/* JPAG v41 - clean premium visual refinement */
body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 12% 6%, rgba(46, 168, 255, 0.16), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(255, 61, 190, 0.13), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(117, 82, 214, 0.10), transparent 35%),
    #060711;
}

body::before {
  opacity: 0.18;
  background-size: 52px 52px;
}

.site-character-bg {
  opacity: 0.54 !important;
}

.navbar {
  width: min(1080px, calc(100% - 32px));
  padding: 12px 20px;
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(7, 8, 20, 0.82);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.nav-links {
  gap: 24px;
}

.nav-brand {
  letter-spacing: 2px;
}

.nav-links a {
  position: relative;
  color: #b8bdd0;
  font-size: 0.88rem;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: #ffffff;
}

.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #62c9ff, #ff80d3);
}

.nav-book {
  padding: 9px 16px;
  color: #ffd4ef;
  border-color: rgba(255, 112, 207, 0.38);
  background: rgba(255, 61, 190, 0.10);
  box-shadow: none;
}

.hero,
.page-hero {
  padding-bottom: 86px;
}

.hero-inner {
  max-width: 820px;
}

.main-logo {
  width: min(320px, 72vw);
  margin-bottom: 30px;
  filter: drop-shadow(0 0 20px rgba(76, 179, 255, 0.30));
}

.eyebrow,
.section-label {
  margin-bottom: 12px;
  color: #83d4ff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

h1 {
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-shadow: none;
}

.tagline {
  max-width: 650px;
  margin-top: 20px;
  color: #b9c0d3;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
}

.btn,
.inline-link {
  min-height: 46px;
  padding: 12px 20px;
  font-size: 0.92rem;
}

.btn-main {
  background: linear-gradient(105deg, #249ce9, #9270ee 55%, #eb58ad);
  box-shadow: 0 10px 26px rgba(104, 89, 208, 0.28);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.045);
}

.btn:hover,
.inline-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(46, 168, 255, 0.18);
}

.section {
  padding: 76px 0;
}

.panel,
.glass-panel {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

h2 {
  color: #f7f5ff;
  letter-spacing: -0.045em;
}

.body-text {
  color: #b8c0d2;
  line-height: 1.75;
}

.services-grid {
  gap: 14px;
}

.service-card {
  min-height: 210px;
  padding: 25px;
  border-radius: 20px;
  background: rgba(14, 16, 34, 0.58);
  box-shadow: none;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.service-card::before {
  opacity: 0.58;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(126, 207, 255, 0.38);
  background: rgba(20, 23, 46, 0.78);
}

.service-card span {
  margin-bottom: 20px;
  color: #87d5ff;
}

.service-card h3 {
  color: #f8f7ff;
  font-size: 1.12rem;
}

.service-card p {
  color: #aeb6c9;
}

.contact-panel {
  max-width: 900px;
  margin: 0 auto;
}

.contact-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
}

.contact-links a {
  justify-content: flex-start;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.035) !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-links a:hover {
  border-color: rgba(125, 207, 255, 0.5);
  background: rgba(46, 168, 255, 0.08) !important;
}

.floating-whatsapp {
  right: 22px;
  bottom: 22px;
  padding: 12px 16px;
  background: linear-gradient(105deg, #249ce9, #d953ae);
  box-shadow: 0 10px 28px rgba(73, 94, 200, 0.28);
}

footer {
  padding: 26px 20px;
  color: #838ba4;
}

.setlist-hero {
  min-height: 45vh;
}

.setlist-intro {
  margin-bottom: 30px;
}

.search-result,
.setlist-song {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
}

.search-result:hover,
.setlist-song:hover {
  border-color: rgba(125, 207, 255, 0.32);
}

.setlist-button-primary {
  background: linear-gradient(105deg, #249ce9, #9270ee 55%, #eb58ad);
  box-shadow: 0 8px 20px rgba(104, 89, 208, 0.22);
}

:focus-visible {
  outline: 3px solid rgba(129, 211, 255, 0.75);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .navbar { padding: 12px 16px; }
  .nav-links { gap: 10px 16px; }
  .nav-links a[aria-current="page"]::after { bottom: -5px; }
  .section { padding: 58px 0; }
  .contact-links { grid-template-columns: 1fr; }
  .floating-whatsapp { right: 14px; bottom: 14px; }
}

/* JPAG v42 - booking confidence section */
.why-section {
  padding-top: 16px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.why-card {
  position: relative;
  min-height: 210px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(14, 16, 34, 0.58);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.why-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at top right, rgba(126, 207, 255, 0.18), transparent 68%);
  pointer-events: none;
}

.why-card:hover {
  transform: translateY(-5px);
  border-color: rgba(126, 207, 255, 0.38);
  background: rgba(20, 23, 46, 0.78);
}

.why-card span {
  display: block;
  margin-bottom: 24px;
  color: #87d5ff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.why-card h3 {
  margin-bottom: 10px;
  color: #f8f7ff;
  font-size: 1.15rem;
}

.why-card p {
  color: #aeb6c9;
  font-size: 0.94rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card { min-height: auto; }
}

/* JPAG v43 - blend the original square logo into the dark background */
.main-logo,
.bio-logo {
  clip-path: circle(49.5% at 50% 50%);
  filter:
    drop-shadow(0 0 14px rgba(46, 168, 255, 0.34))
    drop-shadow(0 0 24px rgba(255, 61, 190, 0.24));
}

/* JPAG v44 - balanced type scale */
.nav-links a {
  font-size: 0.92rem;
}

.eyebrow,
.section-label {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}

h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.2rem);
  line-height: 1;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(1.85rem, 3.8vw, 3.05rem);
  line-height: 1.12;
}

.tagline {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  line-height: 1.65;
}

.body-text {
  font-size: 1rem;
  line-height: 1.72;
}

.service-card h3,
.why-card h3 {
  font-size: 1.16rem;
}

.service-card p,
.why-card p {
  font-size: 0.96rem;
}

@media (max-width: 720px) {
  h1 { font-size: clamp(2.45rem, 11vw, 3.4rem); }
  h2 { font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .eyebrow,
  .section-label { font-size: 0.72rem; }
}

/* JPAG v46 - homepage redesign */
.home-redesign { color:#f5f5fb; background:#030713; }.home-redesign .site-character-bg { opacity:.26 !important; }.home-nav,.home-hero,.home-section,.home-stats,.home-contact,.home-footer { position:relative; z-index:2; width:min(1180px,calc(100% - 40px)); margin-left:auto; margin-right:auto; }.home-nav { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; padding:16px 0; }.home-brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }.home-brand img { width:58px; height:58px; border-radius:50%; object-fit:cover; filter:drop-shadow(0 0 12px rgba(255,61,190,.38)); }.home-brand span { display:grid; gap:3px; }.home-brand strong { font-size:1.22rem; background:linear-gradient(90deg,#62d9ff,#c891ff,#ff79d4); -webkit-background-clip:text; color:transparent; }.home-brand small { color:#abb5cd; font-size:.67rem; }.home-links { display:flex; justify-content:center; gap:28px; }.home-links a { padding:8px 0; color:#e5e7ef; text-decoration:none; font-size:.84rem; font-weight:600; }.home-links a:hover,.home-links .is-current { color:#66dcff; border-bottom:2px solid #44d4ff; }.home-book { padding:11px 22px; border:1px solid rgba(255,99,207,.7); border-radius:9px; color:#fff; background:linear-gradient(100deg,#8522b6,#f35db7); box-shadow:0 0 20px rgba(255,61,190,.25); text-decoration:none; font-size:.84rem; font-weight:700; }
.home-hero { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; min-height:490px; padding:65px 4px 30px; }.hero-copy { max-width:560px; }.hero-kicker { display:inline-block; margin:0 0 22px; padding:7px 13px; border:1px solid rgba(46,198,255,.7); border-radius:999px; color:#70dcff; background:rgba(46,168,255,.06); font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.home-redesign .hero-copy h1 { margin:0; color:#f7f6fd; background:none; -webkit-text-fill-color:initial; font-size:clamp(3.2rem,6vw,5.8rem); font-weight:800; letter-spacing:-.065em; line-height:.96; text-shadow:none; }.hero-copy h1 em,.home-section h2 em,.home-contact h2 em { color:transparent; background:linear-gradient(90deg,#42baff,#a57bff,#ff57bd); -webkit-background-clip:text; font-style:normal; }.hero-text { max-width:485px; margin:20px 0; color:#d0d5e4; font-size:.94rem; line-height:1.62; }.hero-actions { display:flex; gap:12px; }.home-cta,.home-secondary { padding:14px 21px; border-radius:8px; color:#fff; text-decoration:none; font-size:.87rem; font-weight:700; }.home-cta { background:linear-gradient(100deg,#2caeff,#e751c3); box-shadow:0 0 19px rgba(53,155,255,.28); }.home-secondary { border:1px solid rgba(255,255,255,.35); }.social-row { display:flex; align-items:center; gap:11px; margin-top:19px; }.social-row span { margin-right:3px; color:#bcc3d5; font-size:.75rem; }.social-row a { display:grid; width:29px; height:29px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:8px; }.social-row img { width:14px; height:14px; }.hero-brand-art { position:relative; display:grid; width:min(310px,72vw); aspect-ratio:1; place-items:center; justify-self:center; border:2px solid rgba(255,90,202,.75); border-radius:50%; background:radial-gradient(circle,rgba(100,65,209,.25),transparent 65%); box-shadow:0 0 38px rgba(255,61,190,.34),inset 0 0 30px rgba(46,168,255,.19); }.hero-brand-art img { width:78%; border-radius:50%; filter:drop-shadow(0 0 15px rgba(69,197,255,.65)); }.hero-brand-art span { position:absolute; bottom:-25px; color:#75dcff; font-size:.7rem; font-weight:800; letter-spacing:.4em; }.brand-orbit { position:absolute; border:2px solid #46cfff; border-radius:50%; }.orbit-one { inset:-10px 23px 14px -12px; transform:rotate(-28deg); }.orbit-two { inset:17px -13px -11px 30px; border-color:#ff78d3; transform:rotate(27deg); }
.home-stats { display:grid; grid-template-columns:repeat(5,1fr); margin-top:20px; border:1px solid rgba(47,202,255,.52); border-right-color:rgba(255,61,190,.6); border-radius:10px; background:linear-gradient(90deg,rgba(5,25,44,.85),rgba(28,7,34,.83)); }.home-stats div { display:grid; gap:3px; padding:17px 18px; border-right:1px solid rgba(255,255,255,.14); }.home-stats div:last-child { border:0; }.home-stats b { color:#f7f8ff; font-size:1rem; }.home-stats span { color:#bec6d9; font-size:.67rem; }
.home-section { padding:68px 0 0; }.home-label { margin:0 0 9px; color:#65d9ff; font-size:.65rem; font-weight:800; letter-spacing:.18em; text-align:center; text-transform:uppercase; }.home-section h2,.home-contact h2 { margin:0 0 25px; color:#f5f5fb; font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.05em; text-align:center; }.service-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:13px; }.service-grid article { min-height:258px; padding:17px; border:1px solid rgba(146,157,207,.44); border-radius:10px; background:linear-gradient(145deg,rgba(17,26,48,.78),rgba(11,10,28,.69)); }.service-grid article:nth-child(even) { border-color:rgba(246,103,206,.43); }.service-grid span { color:#68d9ff; font-size:.7rem; }.service-mark { display:block; width:29px; height:29px; margin:14px 0; border:2px solid #4bd1ff; border-radius:9px 9px 50% 9px; transform:rotate(-30deg); }.service-grid article:nth-child(even) .service-mark { border-color:#f174d7; }.service-grid h3 { margin:0 0 9px; font-size:.96rem; }.service-grid p { min-height:88px; margin:0; color:#c4cada; font-size:.75rem; line-height:1.48; }.service-grid a,.text-link { color:#65d9ff; text-decoration:none; font-size:.72rem; font-weight:700; }.about-section { max-width:760px; text-align:center; }.about-section p { max-width:580px; margin:0 auto 17px; color:#c8cfde; line-height:1.65; }.why-grid-home { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.why-grid-home article { display:grid; grid-template-columns:54px 1fr; gap:13px; padding:18px; border:1px solid rgba(252,100,211,.55); border-radius:10px; background:rgba(18,15,36,.68); }.why-grid-home article:nth-child(2) { border-color:rgba(167,113,244,.57); }.why-grid-home article:nth-child(3) { border-color:rgba(67,193,255,.57); }.why-grid-home i { width:43px; height:43px; border:2px solid #f276d8; border-radius:50%; }.why-grid-home h3 { margin:0 0 7px; font-size:.9rem; }.why-grid-home p { margin:0; color:#c2c9da; font-size:.75rem; line-height:1.5; }
.home-contact { display:grid; grid-template-columns:1fr 1.1fr; gap:38px; align-items:center; margin-top:68px; padding:28px 34px; border:1px solid rgba(90,202,255,.4); border-radius:10px; background:linear-gradient(110deg,rgba(6,24,42,.86),rgba(21,11,35,.85)); }.home-contact .home-label,.home-contact h2 { text-align:left; }.home-contact h2 { margin-bottom:11px; }.home-contact p:not(.home-label) { margin:0; color:#c4cbda; font-size:.82rem; }.contact-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.contact-actions a { display:flex; align-items:center; justify-content:center; gap:9px; padding:13px; border:1px solid rgba(255,98,207,.53); border-radius:8px; color:#f6f7fb; text-decoration:none; font-size:.82rem; font-weight:700; }.contact-actions a:nth-child(3) { border-color:rgba(116,93,255,.65); }.contact-actions a:nth-child(4) { border-color:rgba(255,255,255,.35); }.contact-actions .contact-whatsapp { border-color:rgba(70,232,145,.67); background:rgba(32,180,91,.12); }.contact-actions img { width:18px; height:18px; }.home-footer { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:25px; margin-top:24px; padding:24px 7px 35px; border-top:1px solid rgba(255,255,255,.18); }.home-footer>div:not(.home-brand) { display:grid; align-content:start; gap:8px; }.home-footer b { color:#fff; font-size:.78rem; }.home-footer a,.home-footer span { color:#adb7cb; text-decoration:none; font-size:.72rem; }.home-footer>p { grid-column:1 / -1; margin:4px 0 0; color:#8791aa; font-size:.7rem; text-align:center; }
@media (max-width:900px) { .home-links { gap:14px; }.service-grid { grid-template-columns:repeat(3,1fr); }.home-stats { grid-template-columns:repeat(3,1fr); }.home-stats div:nth-child(3) { border-right:0; }.home-stats div:nth-child(n+4) { border-top:1px solid rgba(255,255,255,.14); }.home-hero { min-height:auto; }.home-nav { grid-template-columns:auto 1fr; }.home-book { display:none; } }
@media (max-width:640px) { .home-nav,.home-hero,.home-section,.home-stats,.home-contact,.home-footer { width:min(100% - 28px,1180px); }.home-nav { display:flex; flex-wrap:wrap; }.home-brand img { width:47px; height:47px; }.home-links { width:100%; justify-content:flex-start; overflow:auto; gap:18px; }.home-links a { white-space:nowrap; }.home-hero { grid-template-columns:1fr; padding-top:42px; text-align:center; }.hero-copy { margin:auto; }.hero-actions,.social-row { justify-content:center; }.hero-brand-art { order:-1; width:190px; margin-bottom:40px; }.home-stats { grid-template-columns:1fr 1fr; }.home-stats div:nth-child(2n) { border-right:0; }.home-stats div:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.14); }.service-grid { grid-template-columns:1fr 1fr; }.service-grid article { min-height:220px; }.service-grid p { min-height:76px; }.why-grid-home,.home-contact,.home-footer { grid-template-columns:1fr; }.home-contact { gap:22px; padding:24px; }.home-contact .home-label,.home-contact h2 { text-align:center; }.contact-actions { grid-template-columns:1fr; }.home-footer { text-align:center; }.home-footer .home-brand { justify-content:center; }.home-footer>div:not(.home-brand) { justify-items:center; } }

/* JPAG v47 - shared inner-page redesign */
.inner-redesign { background:#030713; }.inner-redesign .site-character-bg { opacity:.24 !important; }.inner-nav,.inner-main,.inner-footer { position:relative; z-index:2; width:min(1180px,calc(100% - 40px)); margin-left:auto; margin-right:auto; }.inner-nav { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; padding:16px 0; }.inner-brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }.inner-brand img { width:55px; height:55px; border-radius:50%; object-fit:cover; filter:drop-shadow(0 0 12px rgba(255,61,190,.38)); }.inner-brand span { display:grid; gap:3px; }.inner-brand strong { font-size:1.17rem; background:linear-gradient(90deg,#62d9ff,#c891ff,#ff79d4); -webkit-background-clip:text; color:transparent; }.inner-brand small { color:#abb5cd; font-size:.65rem; }.inner-links { display:flex; justify-content:center; gap:28px; }.inner-links a { padding:8px 0; color:#e5e7ef; text-decoration:none; font-size:.84rem; font-weight:600; }.inner-links a:hover,.inner-links .is-current { color:#66dcff; border-bottom:2px solid #44d4ff; }.inner-book { padding:11px 22px; border:1px solid rgba(255,99,207,.7); border-radius:9px; color:#fff; background:linear-gradient(100deg,#8522b6,#f35db7); box-shadow:0 0 20px rgba(255,61,190,.25); text-decoration:none; font-size:.84rem; font-weight:700; }
.inner-redesign .inner-main { padding-top:0; }.inner-redesign .inner-hero { min-height:310px; padding:58px 20px 38px; text-align:center; }.inner-redesign .inner-hero .bio-logo { width:125px; margin-bottom:13px; }.inner-redesign .inner-hero h1 { margin:3px 0 12px; font-size:clamp(3rem,7vw,5.4rem); letter-spacing:-.06em; }.inner-redesign .inner-hero .tagline { max-width:650px; margin:0 auto; color:#c5cad8; font-size:1rem; }.inner-redesign .inner-section { width:100%; padding:30px 0; }.inner-redesign .panel,.inner-redesign .glass-panel { border:1px solid rgba(104,212,255,.28); border-radius:14px; background:linear-gradient(140deg,rgba(11,29,48,.77),rgba(22,10,33,.72)); box-shadow:0 0 27px rgba(46,168,255,.08); backdrop-filter:blur(16px); }.inner-redesign .panel { padding:34px; }.inner-redesign .section-label { color:#69dbff; font-size:.68rem; font-weight:800; letter-spacing:.17em; }.inner-redesign .panel h2,.inner-redesign .inner-section>h2 { color:#f4f4fb; font-size:clamp(2rem,4vw,3.1rem); }.inner-redesign .body-text { color:#c7cede; font-size:.98rem; line-height:1.72; }.inner-redesign .inline-link { border-color:rgba(255,96,202,.52); color:#ffa0df; }
.inner-redesign .members-section { width:100%; }.inner-redesign .meet-band-title { margin-bottom:27px !important; font-size:clamp(3rem,6vw,4.6rem)!important; }.inner-redesign .member-grid { gap:15px; }.inner-redesign .clean-member-card { min-height:0; border-radius:14px!important; }.inner-redesign .clean-member-photo,.inner-redesign .member-photo { height:285px!important; border-radius:14px 14px 0 0!important; }.inner-redesign .clean-member-card .member-info { padding:20px!important; }.inner-redesign .member-animation { width:105px!important; margin-top:12px!important; }.inner-redesign .highlight-grid { grid-template-columns:repeat(5,1fr); gap:12px; }.inner-redesign .highlight-card { min-height:104px; border-radius:10px; color:#e8ebf7; background:linear-gradient(145deg,rgba(12,29,49,.78),rgba(25,10,37,.7)); }
.inner-redesign .setlist-hero { min-height:280px; }.inner-redesign .setlist-section { padding-top:10px; }.inner-redesign .setlist-intro { margin-bottom:25px; }.inner-redesign .setlist-intro h2 { color:#f4f4fb; font-size:clamp(2rem,4vw,3.1rem); }.inner-redesign .setlist-workspace { max-width:none; gap:16px; }.inner-redesign .glass-panel { padding:24px; border-radius:14px; }.inner-redesign .song-search label,.inner-redesign .manual-song-form label,.inner-redesign .send-setlist-form label { color:#e9edf8; }.inner-redesign .song-search input,.inner-redesign .manual-song-form input,.inner-redesign .send-setlist-form input,.inner-redesign .send-setlist-form select { border-color:rgba(255,255,255,.19); border-radius:8px; background:rgba(255,255,255,.055); }.inner-redesign .setlist-button-primary { border-radius:8px; background:linear-gradient(100deg,#2caeff,#e751c3); }.inner-redesign .setlist-button-secondary { border-radius:8px; border-color:rgba(94,210,255,.48); }.inner-redesign .search-result,.inner-redesign .setlist-song { border-radius:10px; }.inner-redesign .setlist-empty { border-radius:10px; }.inner-redesign .setlist-builder-head h2 { font-size:2rem; }.inner-redesign .contact-section { padding-bottom:20px; }
.inner-redesign .gallery-section { padding-top:10px; }.inner-redesign .media-grid { grid-template-columns:repeat(3,1fr); gap:15px; }.inner-redesign .placeholder-card { min-height:200px; border:1px solid rgba(105,213,255,.3); border-radius:12px; background:linear-gradient(145deg,rgba(14,30,51,.82),rgba(29,10,39,.78)); }.inner-redesign .placeholder-card:nth-child(even) { border-color:rgba(246,103,206,.38); }.inner-redesign .placeholder-card::after { color:#d2d8e7; font-size:.82rem; }
.inner-footer { display:flex; align-items:center; justify-content:space-between; margin-top:38px; padding:22px 5px 34px; border-top:1px solid rgba(255,255,255,.17); }.inner-footer>p { margin:0; color:#8993aa; font-size:.72rem; }.inner-redesign .floating-whatsapp { border-radius:8px; background:linear-gradient(100deg,#2caeff,#e751c3); }
@media (max-width:900px) { .inner-links { gap:14px; }.inner-redesign .highlight-grid { grid-template-columns:repeat(3,1fr); }.inner-redesign .highlight-card:last-child { grid-column:auto; } }
@media (max-width:640px) { .inner-nav,.inner-main,.inner-footer { width:min(100% - 28px,1180px); }.inner-nav { display:flex; flex-wrap:wrap; }.inner-book { display:none; }.inner-brand img { width:47px; height:47px; }.inner-links { width:100%; justify-content:flex-start; overflow:auto; gap:18px; }.inner-links a { white-space:nowrap; }.inner-redesign .inner-hero { min-height:245px; padding-top:36px; }.inner-redesign .panel { padding:23px; }.inner-redesign .member-grid,.inner-redesign .highlight-grid,.inner-redesign .media-grid { grid-template-columns:1fr; }.inner-redesign .clean-member-photo,.inner-redesign .member-photo { height:340px!important; }.inner-redesign .setlist-workspace { grid-template-columns:1fr; }.inner-footer { align-items:flex-start; flex-direction:column; gap:17px; }.inner-redesign .gallery-section .media-grid { grid-template-columns:1fr 1fr; } }
.home-stats.home-stats-compact { grid-template-columns:repeat(2,1fr); }
.inner-redesign .gallery-section .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.inner-redesign .gallery-photo { position:relative; min-height:290px; margin:0; overflow:hidden; border:1px solid rgba(105,213,255,.4); border-radius:14px; background:#0b1020; box-shadow:0 0 24px rgba(46,168,255,.08); }.inner-redesign .gallery-photo:nth-child(even) { border-color:rgba(246,103,206,.45); }.inner-redesign .gallery-photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .35s ease; }.inner-redesign .gallery-photo:hover img { transform:scale(1.035); }.inner-redesign .gallery-photo-wide { min-height:340px; }@media (max-width:640px) { .inner-redesign .gallery-section .media-grid { grid-template-columns:1fr; }.inner-redesign .gallery-photo,.inner-redesign .gallery-photo-wide { min-height:250px; } }
.inner-redesign .gallery-photo-portrait { width:min(100%,390px); min-height:520px; aspect-ratio:3 / 4; justify-self:center; align-self:start; }.inner-redesign .gallery-photo-portrait img { position:relative!important; object-fit:contain!important; background:#080b16; }.inner-redesign .gallery-photo-portrait:hover img { transform:none; }@media (max-width:640px) { .inner-redesign .gallery-photo-portrait { width:min(100%,390px); min-height:520px; } }
.home-links,.inner-links { gap:18px; }.home-links a,.inner-links a { font-size:.76rem; }@media (max-width:1000px) { .inner-book { display:none; }.inner-nav { grid-template-columns:auto 1fr; }.home-book { display:none; }.home-nav { grid-template-columns:auto 1fr; } }

/* Video carousel */
.video-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
}
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  border-radius: 16px;
  align-items: center;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0 8px;
}
.carousel-slide .placeholder-card {
  border-radius: 16px;
  border: 1px solid rgba(105,213,255,.35);
  background: linear-gradient(145deg, rgba(14,30,51,.88), rgba(29,10,39,.84));
}
.carousel-slide .video-player {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  border-radius: 16px;
  background: #050814;
}
.carousel-arrow {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  color: #e8e8f2;
  font-size: 1.8rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, border-color .2s, transform .15s;
  z-index: 2;
  line-height: 1;
}
.carousel-arrow:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(105,213,255,.5);
  transform: scale(1.08);
}
.carousel-arrow:active { transform: scale(.94); }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s, transform .15s;
}
.carousel-dot:hover { border-color: rgba(105,213,255,.6); transform: scale(1.2); }
.carousel-dot.is-active {
  background: linear-gradient(100deg, #2caeff, #e751c3);
  border-color: transparent;
  transform: scale(1.2);
}
@media (max-width: 768px) {
  .carousel-arrow { flex: 0 0 36px; width: 36px; height: 36px; font-size: 1.4rem; }
  .carousel-slide .video-player { max-height: 55vh; }
}
@media (max-width: 480px) {
  .carousel-arrow { display: none; }
  .carousel-slide .video-player { max-height: 50vh; }
}