/* CARAOK hero slideshow (Spec 05c). Premium, restrained: slow zoom, word-by-word headline, light particles. CSS only; see hero.js for the controls. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1000px; overflow: hidden; background: var(--c-midnight); isolation: isolate; }
@media (min-width: 1900px) { .hero { max-height: 1240px; } }
@media (max-width: 767px) { .hero { height: 88vh; height: 88svh; } }
.hero .slides, .hero .slide, .hero .bg, .hero .shade, .hero .fx { position: absolute; inset: 0; }
.hero .bg, .hero .shade, .hero .fx { pointer-events: none; }

/* Slide crossfade. Hidden slides are visibility:hidden, so only the active slide can take focus. */
.slide { opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; }
.slide:not(.is-active) * { animation-play-state: paused !important; }

/* Background: the photo (05d: <picture>, WebP + JPEG srcset) over the designed fallback art, which is hidden once the photo is in */
.bg { overflow: hidden; background: radial-gradient(ellipse 80% 70% at 75% 30%, #1E1736, transparent 70%), linear-gradient(180deg, #0A0614, #151027); }
.hero .pic { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-d, 70% 40%); animation: photoin 0.9s ease both; transform-origin: 70% 40%; }
/* Phones: a 16:9 photo in a portrait box shows a narrow band. --pos-m picks the band with the faces; --zm (> 1) crops the top of the picture
   (ceiling, lights) so faces that sit lower in the frame come up into the part of the slide the text does not cover. */
@media (max-width: 767px) { .photo { top: auto; bottom: 0; height: calc(100% * var(--zm, 1)); object-position: var(--pos-m, 72% 50%); } }
.slide.is-active .photo { animation: photoin 0.9s ease both, kb 10s ease-out both; }
.slide:nth-child(even).is-active .photo { animation: photoin 0.9s ease both, kb2 10s ease-out both; }
@keyframes photoin { from { opacity: 0; } to { opacity: 1; } }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.09) translate3d(-1.2%, -0.6%, 0); } }
@keyframes kb2 { from { transform: scale(1.08) translate3d(-1.2%, 0, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
.has-photo .fb > * { visibility: hidden; transition: visibility 0s linear 1s; }

/* Overlay: dark from the left (text), fade into the page at the bottom */
.shade { background: linear-gradient(90deg, rgba(10, 6, 20, 0.94) 0%, rgba(10, 6, 20, 0.9) 30%, rgba(10, 6, 20, 0.77) 48%, rgba(10, 6, 20, 0.3) 66%, rgba(10, 6, 20, 0) 82%), linear-gradient(180deg, rgba(10, 6, 20, 0.6) 0, rgba(10, 6, 20, 0) 22%, rgba(10, 6, 20, 0) 64%, #0A0614 100%); }
/* Tablets (768-1099): the headline runs past the dark left half and would sit on the subject, so the copy moves to the bottom over a strong bottom gradient (the faces stay in the upper half). */
@media (min-width: 768px) and (max-width: 1099px) {
  .shade { background: linear-gradient(90deg, rgba(10, 6, 20, 0.9) 0%, rgba(10, 6, 20, 0.8) 30%, rgba(10, 6, 20, 0.5) 50%, rgba(10, 6, 20, 0.12) 70%, rgba(10, 6, 20, 0) 85%), linear-gradient(180deg, rgba(10, 6, 20, 0.6) 0, rgba(10, 6, 20, 0) 18%, rgba(10, 6, 20, 0) 34%, rgba(10, 6, 20, 0.9) 58%, #0A0614 100%); }
  .slide:not(.slide-brand) .copy { justify-content: flex-end; padding-bottom: 120px; }
}
@media (max-width: 767px) { .shade { background: linear-gradient(180deg, rgba(10, 6, 20, 0.6) 0, rgba(10, 6, 20, 0.12) 18%, rgba(10, 6, 20, 0.88) 36%, #0A0614 90%); } }

/* Text */

.copy { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding-top: 80px; padding-bottom: 100px; transition: opacity 0.25s ease; }
.slide:not(.is-active) .copy { opacity: 0; }
@media (max-width: 767px) { .copy { justify-content: flex-end; gap: 14px; padding-top: 72px; padding-bottom: 84px; } }
.hl { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 2.4vw + 22px, 116px); line-height: 1.06; letter-spacing: -0.02em; max-width: 14em; text-wrap: balance; overflow-wrap: normal; hyphens: none; text-shadow: 0 2px 32px rgba(10, 6, 20, 0.55); }
.hl em { font-style: normal; }
.hero .sub { max-width: 32em; text-wrap: pretty; font-size: clamp(16px, 0.55vw + 12px, 30px); line-height: 1.55; color: var(--c-text-dim); }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.hero .eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--c-cyan); }
.hero .btn { min-height: 52px; padding: 14px 28px; font-size: clamp(1rem, 0.3vw + 0.9rem, 1.375rem); }
.hero .cta-row { margin-top: 6px; }
@media (max-width: 479px) { .hero .cta-row { flex-direction: column; align-items: stretch; width: 100%; } }
@media (max-width: 767px) and (max-height: 700px) { .hero .sub { font-size: 15px; line-height: 1.45; } .hero .btn { min-height: 46px; padding: 10px 20px; } .copy { gap: 10px; } }

/* Word-by-word headline, gradient sheen on the key words, eyebrow and CTAs after */
.w { display: inline-block; }
.slide.is-active .w { animation: rise 0.75s var(--ease) both; animation-delay: calc(0.3s + var(--i) * 55ms); }
.slide.is-active .eyebrow { animation: fadeup 0.7s var(--ease) 0.5s both; }
.slide.is-active .sub { animation: fadeup 0.8s var(--ease) 0.95s both; }
.slide.is-active .cta-row { animation: fadeup 0.8s var(--ease) 1.2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sheen { color: var(--c-pink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sheen { background: linear-gradient(100deg, #FF3FA4 0%, #C42CFF 25%, #28D7FF 50%, #C42CFF 75%, #FF3FA4 100%) 0 0 / 200% 100% repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  .slide.is-active .sheen { animation: rise 0.75s var(--ease) both, sheen 6s linear 1.2s infinite; animation-delay: calc(0.3s + var(--i) * 55ms), 1.2s; }
}
@keyframes sheen { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* ---- Slide 1 (05d): the primary logo is the star. Centred, with a breathing neon glow behind it and a shine that sweeps across the artwork every few seconds.
   The PNG is untouched: the glow is a blurred layer behind, the shine is an overlay masked by the logo's own alpha. Both are off under reduced motion (site.css). ---- */
.slide-brand .copy { align-items: center; text-align: center; padding-top: 84px; padding-bottom: 110px; gap: 16px; }
.slide-brand .hl { max-width: 16em; font-size: clamp(28px, 1.9vw + 16px, 84px); }
.slide-brand .sub { max-width: 36em; }
.slide-brand .cta-row { justify-content: center; }
.slide-brand .shade { background: radial-gradient(ellipse 60% 64% at 50% 46%, rgba(10, 6, 20, 0.86), rgba(10, 6, 20, 0.62) 58%, rgba(10, 6, 20, 0.18) 100%), linear-gradient(180deg, rgba(10, 6, 20, 0.6) 0, rgba(10, 6, 20, 0) 22%, rgba(10, 6, 20, 0) 64%, #0A0614 100%); }
.hero-logo { position: relative; width: min(50vw, 900px, 64vh); margin-bottom: 4px; }
.hero-logo img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 10px 30px rgba(10, 6, 20, 0.55)); }
.hero-logo::before { content: ""; position: absolute; z-index: 0; inset: -34% -10%; border-radius: 50%; opacity: 0.8; pointer-events: none; background: radial-gradient(ellipse 48% 62% at 34% 52%, rgba(196, 44, 255, 0.66), transparent 70%), radial-gradient(ellipse 44% 58% at 72% 50%, rgba(40, 215, 255, 0.5), transparent 70%), radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 63, 164, 0.22), transparent 70%); filter: blur(22px); animation: breathe 4.6s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: 0.55; transform: scale(0.94); } to { opacity: 1; transform: scale(1.07); } }
.hero-logo .shine { position: absolute; z-index: 2; inset: 0; pointer-events: none; -webkit-mask: url("/img/logo-full.png") center / 100% 100% no-repeat; mask: url("/img/logo-full.png") center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0.62) 50%, rgba(255, 255, 255, 0.28) 52%, transparent 58%) 160% 0 / 260% 100% no-repeat; animation: shine 6s ease-in-out 1.8s infinite; }
@keyframes shine { 0% { background-position: 160% 0; } 24% { background-position: -60% 0; } 100% { background-position: -60% 0; } }
.slide.is-active .hero-logo { animation: logoin 1s var(--ease) both; }
@keyframes logoin { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
/* On the logo slide the equaliser becomes a low stage floor across the whole width, behind the controls, so it never crowds the centred CTAs. */
.slide-brand .eq { left: 0; right: 0; width: auto; bottom: 0; height: 9%; gap: clamp(6px, 0.6vw, 14px); padding: 0 var(--gutter); }
.slide-brand .eq i { opacity: 0.24; border-radius: 3px 3px 0 0; }
.slide-brand.has-photo .eq i { opacity: 0.14; }
@media (max-width: 1099px) { .hero-logo { width: min(64vw, 64vh); } }
@media (max-width: 767px) { .hero-logo { width: min(88vw, 460px); margin-bottom: 2px; } .slide-brand .copy { gap: 12px; } .slide-brand .eq { display: none; } .slide-brand .shade { background: linear-gradient(180deg, rgba(10, 6, 20, 0.6) 0, rgba(10, 6, 20, 0.3) 14%, rgba(10, 6, 20, 0.8) 30%, #0A0614 90%); } }
@media (max-width: 767px) and (max-height: 700px) { .hero-logo { width: min(70vw, 360px); } }

/* Controls */
.hero-ui { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: clamp(18px, 4vh, 48px); z-index: 5; }
.segs { display: flex; gap: 8px; flex: 0 1 440px; min-width: 0; }
.seg { flex: 1; height: 44px; padding: 20px 0; /* spec 36: a 44 px tap target, the same 4 px bar */ background: none; border: 0; cursor: pointer; border-radius: 4px; }
.seg i { display: block; position: relative; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(247, 243, 255, 0.28); }
.seg i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #FF3FA4, #C42CFF); transform: scaleX(0); transform-origin: left; }
.seg.done i::after { transform: scaleX(1); }
.seg.is-active i::after { animation: fill 7s linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.seg:hover i { background: rgba(247, 243, 255, 0.45); }
.ctrls { display: flex; gap: 8px; }
.ctrl { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(21, 16, 39, 0.6); border: 1px solid rgba(247, 243, 255, 0.2); color: var(--c-text); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color var(--t-control), background var(--t-control); }
.ctrl:hover { border-color: var(--c-cyan); background: rgba(21, 16, 39, 0.85); }
.i-play { display: none; }
.is-user-paused .i-play { display: block; }
.is-user-paused .i-pause { display: none; }
@media (max-width: 767px) { .ctrl.prev, .ctrl.next { display: none; } }
.is-user-paused .seg i::after, .is-hold .seg i::after, .is-off .seg i::after,
.is-user-paused .photo, .is-user-paused .fb *, .is-user-paused .fx *, .is-user-paused .sheen, .is-user-paused .hero-logo::before, .is-user-paused .hero-logo .shine { animation-play-state: paused !important; }
.is-off .slide * { animation-play-state: paused !important; }

/* ---- Designed fallbacks (no photo needed). Brand colors only: midnight base, localized pink / magenta / violet / cyan light. ---- */
.fb > span, .fb > img { position: absolute; }
.fb .glow { border-radius: 50%; }
.fb .mark { width: auto; opacity: 0.11; }
.slide.is-active .fb { animation: bgdrift 14s ease-in-out infinite alternate; }
@keyframes bgdrift { from { transform: scale(1); } to { transform: scale(1.04) translate3d(-1%, 0.5%, 0); } }

/* 1 Stage: light beams, floor glow, large faint symbol */
.fb-1 .g1 { width: 62vw; height: 62vw; left: 19%; top: -26%; background: radial-gradient(closest-side, rgba(196, 44, 255, 0.5), transparent); }
.fb-1 .g2 { width: 46vw; height: 46vw; left: 46%; top: 40%; background: radial-gradient(closest-side, rgba(40, 215, 255, 0.27), transparent); }
.fb-1 .beam { top: -12%; width: 22vw; height: 130%; transform-origin: 50% 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--bc, rgba(255, 63, 164, 0.55)), transparent 78%); opacity: 0.5; animation: sway 8s ease-in-out infinite alternate; }
.fb-1 .b1 { left: 18%; --r: -18deg; --bc: rgba(255, 63, 164, 0.5); }
.fb-1 .b2 { left: 42%; --r: -4deg; --bc: rgba(40, 215, 255, 0.4); animation-delay: -3s; }
.fb-1 .b3 { left: 68%; --r: 16deg; --bc: rgba(111, 54, 255, 0.55); animation-delay: -5s; }
@keyframes sway { from { transform: rotate(calc(var(--r) - 4deg)); } to { transform: rotate(calc(var(--r) + 4deg)); } }
.fb-1 .floor { left: -4%; right: -4%; bottom: 0; height: 28%; background: linear-gradient(0deg, rgba(255, 63, 164, 0.34), rgba(111, 54, 255, 0.1) 60%, transparent); }
.fb-1 .floor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 63, 164, 0.7) 30%, rgba(40, 215, 255, 0.6) 70%, transparent); box-shadow: 0 0 18px 2px rgba(255, 63, 164, 0.35); }

/* 2 Singers: pulsing rings around the symbol (a voice ripple) */
.fb-2 .g1 { width: 58vw; height: 58vw; left: 44%; top: -4%; background: radial-gradient(closest-side, rgba(255, 63, 164, 0.51), transparent); }
.fb-2 .g2 { width: 48vw; height: 48vw; left: 56%; top: 30%; background: radial-gradient(closest-side, rgba(111, 54, 255, 0.54), transparent); }
.fb-2 .ring { left: 72%; top: 48%; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(255, 63, 164, 0.32); animation: ringpulse 5s ease-in-out infinite alternate; }
.fb-2 .r1 { width: 34vh; height: 34vh; } .fb-2 .r2 { width: 58vh; height: 58vh; border-color: rgba(196, 44, 255, 0.28); animation-delay: -1.6s; } .fb-2 .r3 { width: 88vh; height: 88vh; border-color: rgba(40, 215, 255, 0.2); animation-delay: -3.2s; }
@keyframes ringpulse { from { transform: translate(-50%, -50%) scale(0.96); } to { transform: translate(-50%, -50%) scale(1.04); } }
.fb-2 .mark { left: 72%; top: 48%; height: 30%; transform: translate(-50%, -50%); opacity: 0.12; }

/* 3 Home: a big TV with a QR-like card, phones with a cyan link */
.fb-3 .g1 { width: 60vw; height: 60vw; left: 38%; top: -10%; background: radial-gradient(closest-side, rgba(196, 44, 255, 0.46), transparent); }
.fb-3 .g2 { width: 46vw; height: 46vw; left: 52%; top: 36%; background: radial-gradient(closest-side, rgba(40, 215, 255, 0.27), transparent); }
.fb-3 .tv { left: 59%; top: 24%; width: 35%; aspect-ratio: 16 / 9; border-radius: 14px; border: 3px solid rgba(247, 243, 255, 0.16); background: #0A0614; box-shadow: 0 0 90px rgba(196, 44, 255, 0.38); padding: 6px; }
.fb-3 .tv-screen { position: absolute; inset: 6px; border-radius: 8px; background: linear-gradient(135deg, rgba(196, 44, 255, 0.55), rgba(111, 54, 255, 0.4) 55%, rgba(40, 215, 255, 0.35)); }
.fb-3 .tv-qr { position: absolute; right: 7%; top: 14%; width: 20%; aspect-ratio: 1; border-radius: 6px; border: 5px solid #F7F3FF; background: #F7F3FF var(--qr) center / 100% 100%; image-rendering: pixelated; }
.fb-3 .tv-line { position: absolute; left: 7%; height: 8%; border-radius: 6px; background: rgba(247, 243, 255, 0.35); }
.fb-3 .tv-line.l1 { top: 18%; width: 40%; } .fb-3 .tv-line.l2 { top: 38%; width: 30%; opacity: 0.7; } .fb-3 .tv-line.l3 { top: 58%; width: 50%; opacity: 0.5; }
.fb-3 .tv-base { left: 70.5%; top: calc(24% + 35% * 0.5625 + 1%); width: 12%; height: 8px; border-radius: 4px; background: rgba(247, 243, 255, 0.16); }
.fb-3 .phone { width: 7%; aspect-ratio: 9 / 18; border-radius: 12px; border: 2px solid rgba(40, 215, 255, 0.55); background: linear-gradient(160deg, rgba(255, 63, 164, 0.45), rgba(111, 54, 255, 0.35)); box-shadow: 0 0 36px rgba(40, 215, 255, 0.3); }
.fb-3 .p1 { left: 61%; top: 60%; transform: rotate(-8deg); } .fb-3 .p2 { left: 85%; top: 62%; transform: rotate(8deg); }

/* 4 Venue: a lounge. Neon edge lines, warm pendant lights, a counter with phones on the tables, bokeh behind */
.fb-4 .g1 { width: 56vw; height: 56vw; left: 46%; top: -16%; background: radial-gradient(closest-side, rgba(111, 54, 255, 0.54), transparent); }
.fb-4 .g2 { width: 46vw; height: 46vw; left: 52%; top: 36%; background: radial-gradient(closest-side, rgba(255, 63, 164, 0.35), transparent); }
.fb-4 .neon { height: 2px; background: linear-gradient(90deg, transparent, #FF3FA4 30%, #FF3FA4 70%, transparent); box-shadow: 0 0 22px 3px rgba(255, 63, 164, 0.6); }
.fb-4 .n1 { left: 40%; right: -4%; top: 16%; } .fb-4 .n2 { left: 52%; right: -4%; top: 42%; background: linear-gradient(90deg, transparent, #28D7FF 30%, #28D7FF 70%, transparent); box-shadow: 0 0 20px 3px rgba(40, 215, 255, 0.5); opacity: 0.8; }
.fb-4 .bokeh { border-radius: 50%; animation: bob 9s ease-in-out infinite alternate; }
.fb-4 .k1 { width: 16vw; height: 16vw; left: 58%; top: 8%; background: radial-gradient(circle, rgba(255, 63, 164, 0.45), transparent 70%); }
.fb-4 .k2 { width: 10vw; height: 10vw; left: 84%; top: 24%; background: radial-gradient(circle, rgba(40, 215, 255, 0.4), transparent 70%); animation-delay: -3s; }
.fb-4 .k3 { width: 20vw; height: 20vw; left: 66%; top: 40%; background: radial-gradient(circle, rgba(111, 54, 255, 0.55), transparent 70%); animation-delay: -5s; }
.fb-4 .k4 { width: 8vw; height: 8vw; left: 48%; top: 34%; background: radial-gradient(circle, rgba(255, 63, 164, 0.4), transparent 70%); animation-delay: -2s; }
.fb-4 .k5 { width: 12vw; height: 12vw; left: 90%; top: 50%; background: radial-gradient(circle, rgba(196, 44, 255, 0.45), transparent 70%); animation-delay: -6s; }
@keyframes bob { from { transform: translateY(-10px); } to { transform: translateY(14px); } }
.fb-4 .lamp { top: 0; width: 2px; height: 30%; background: linear-gradient(180deg, rgba(247, 243, 255, 0), rgba(247, 243, 255, 0.35)); }
.fb-4 .lamp::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: #FFE7A3; box-shadow: 0 0 24px 8px rgba(255, 201, 60, 0.55), 0 0 110px 50px rgba(255, 201, 60, 0.12); animation: lampflicker 7s ease-in-out infinite alternate; }
.fb-4 .m1 { left: 60%; } .fb-4 .m2 { left: 75%; height: 26%; } .fb-4 .m2::after { animation-delay: -2.5s; } .fb-4 .m3 { left: 90%; height: 33%; } .fb-4 .m3::after { animation-delay: -4s; }
@keyframes lampflicker { from { opacity: 0.85; } to { opacity: 1; } }
.fb-4 .booth { left: 50%; right: -6%; bottom: 0; height: 30%; border-radius: 48px 0 0 0; background: linear-gradient(180deg, #241A48, #0F0A1F 75%); border-top: 2px solid rgba(255, 63, 164, 0.85); box-shadow: 0 -2px 36px rgba(255, 63, 164, 0.35), inset 0 40px 80px -40px rgba(255, 63, 164, 0.25); }
.fb-4 .ph { bottom: 30%; width: 3.6%; aspect-ratio: 9 / 18; border-radius: 10px; border: 2px solid rgba(40, 215, 255, 0.6); background: linear-gradient(160deg, rgba(255, 63, 164, 0.5), rgba(111, 54, 255, 0.4)); box-shadow: 0 0 30px rgba(40, 215, 255, 0.35); transform-origin: bottom; }
.fb-4 .h1 { left: 59%; transform: rotate(-7deg); } .fb-4 .h2 { left: 73%; transform: rotate(4deg); } .fb-4 .h3 { left: 87%; transform: rotate(-3deg); }

/* 5 Community: spotlight and a glowing rating board */
.fb-5 .g1 { width: 56vw; height: 56vw; left: 44%; top: -20%; background: radial-gradient(closest-side, rgba(255, 63, 164, 0.46), transparent); }
.fb-5 .g2 { width: 44vw; height: 44vw; left: 54%; top: 40%; background: radial-gradient(closest-side, rgba(40, 215, 255, 0.3), transparent); }
.fb-5 .spot { left: 54%; width: 36%; top: -6%; height: 100%; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 201, 60, 0.28), rgba(247, 243, 255, 0.03) 85%); animation: spotpulse 6s ease-in-out infinite alternate; }
@keyframes spotpulse { from { opacity: 0.6; } to { opacity: 1; } }
.fb-5 .pod { bottom: 0; width: 5.2%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(255, 63, 164, 0.6), rgba(111, 54, 255, 0.12)); border-top: 2px solid rgba(255, 63, 164, 0.9); }
.fb-5 .p1 { left: 56%; height: 24%; } .fb-5 .p2 { left: 62.5%; height: 36%; } .fb-5 .p3 { left: 69%; height: 52%; border-top-color: #28D7FF; background: linear-gradient(180deg, rgba(40, 215, 255, 0.5), rgba(111, 54, 255, 0.12)); } .fb-5 .p4 { left: 75.5%; height: 32%; } .fb-5 .p5 { left: 82%; height: 20%; }
.fb-5 .mark { left: 72%; top: 24%; height: 24%; transform: translate(-50%, -50%); opacity: 0.12; }
@media (max-width: 767px) {
  .fb-1 .beam { left: 0; width: 50vw; } .fb-1 .b2 { left: 25%; } .fb-1 .b3 { left: 50%; }
  .fb-2 .ring, .fb-2 .mark { left: 50%; top: 26%; } .fb-2 .r1 { width: 22vh; height: 22vh; } .fb-2 .r2 { width: 38vh; height: 38vh; } .fb-2 .r3 { width: 56vh; height: 56vh; }
  .fb-3 .tv { left: 9%; top: 13%; width: 82%; } .fb-3 .tv-base { left: 40%; top: calc(13% + 82% * 0.5625 * 1.0 + 3%); width: 20%; } .fb-3 .phone { display: none; }
  .fb-4 .n1 { left: -4%; right: -4%; top: 10%; } .fb-4 .n2 { left: -4%; right: -4%; top: 24%; } .fb-4 .k1 { left: 6%; width: 34vw; height: 34vw; } .fb-4 .k3 { left: 52%; top: 12%; width: 40vw; height: 40vw; } .fb-4 .k4 { left: 30%; top: 20%; } .fb-4 .k5 { left: 80%; top: 30%; }
  .fb-4 .lamp { height: 20%; } .fb-4 .m1 { left: 22%; } .fb-4 .m2 { left: 50%; height: 16%; } .fb-4 .m3 { left: 78%; height: 23%; }
  .fb-4 .booth { left: -6%; right: -6%; bottom: 52%; height: 14%; border-radius: 0; } .fb-4 .ph { bottom: 66%; width: 11%; } .fb-4 .h1 { left: 16%; } .fb-4 .h2 { left: 45%; } .fb-4 .h3 { left: 74%; }
  .fb-5 .spot { left: 20%; width: 60%; } .fb-5 .pod { width: 11%; } .fb-5 .p1 { left: 8%; height: 14%; } .fb-5 .p2 { left: 21%; height: 22%; } .fb-5 .p3 { left: 34%; height: 32%; } .fb-5 .p4 { left: 47%; height: 20%; } .fb-5 .p5 { left: 60%; height: 12%; } .fb-5 .mark { left: 50%; top: 18%; }
  .fb-5 .pod { bottom: 18%; }
}

/* ---- Party touches (light, CSS only; paused when the slide is not shown) ---- */
.dots i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(247, 243, 255, 0.9); box-shadow: 0 0 12px 3px rgba(255, 63, 164, 0.55); opacity: 0; animation: floatup var(--dur) ease-in-out var(--dl) infinite; }
.dots i.c { box-shadow: 0 0 12px 3px rgba(40, 215, 255, 0.55); } .dots i.v { box-shadow: 0 0 12px 3px rgba(111, 54, 255, 0.7); }
@keyframes floatup { 0% { opacity: 0; transform: translateY(24px); } 30% { opacity: 0.85; } 70% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-80px); } }
.eq { position: absolute; right: clamp(16px, 5vw, 88px); bottom: clamp(70px, 12vh, 120px); width: min(30vw, 440px); height: 20%; display: flex; align-items: flex-end; gap: 6px; }
.eq i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #FF3FA4, #6F36FF); opacity: 0.6; transform-origin: bottom; animation: eqbar var(--dur) ease-in-out var(--dl) infinite alternate; }
@keyframes eqbar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
@media (max-width: 767px) { .eq { width: 56vw; right: 16px; bottom: auto; top: 17%; height: 14%; } .hero .fx { bottom: 58%; overflow: hidden; } .drift i { bottom: -6%; } }
.eq.eq-s { right: 10%; left: 10%; bottom: 8%; top: auto; width: auto; height: 22%; }
.drift i { position: absolute; bottom: -4%; width: var(--s); height: var(--s); opacity: 0; background: #FF3FA4; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; animation: drift var(--dur) linear var(--dl) infinite; filter: drop-shadow(0 0 6px rgba(255, 63, 164, 0.6)); }
.drift .heart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.5l-1.4-1.3C5.4 15.5 2 12.4 2 8.6 2 5.5 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3 19.6 3 22 5.5 22 8.6c0 3.8-3.4 6.9-8.6 11.6z'/%3E%3C/svg%3E"); }
.drift .star { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 20.9l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E"); background: #FFC93C; filter: drop-shadow(0 0 6px rgba(255, 201, 60, 0.5)); }
.drift .star.c { background: #28D7FF; filter: drop-shadow(0 0 6px rgba(40, 215, 255, 0.55)); }
@keyframes drift { 0% { opacity: 0; transform: translate(0, 0) scale(0.7); } 15% { opacity: 0.85; } 85% { opacity: 0.6; } 100% { opacity: 0; transform: translate(var(--sw), -70vh) scale(1.1); } }
.confetti i { position: absolute; top: -4%; width: 6px; height: 11px; border-radius: 1px; opacity: 0; background: #FF3FA4; animation: fall var(--dur) linear var(--dl) infinite; }
.confetti i.c { background: #28D7FF; } .confetti i.v { background: #6F36FF; } .confetti i.g { background: #FFC93C; }
@keyframes fall { 0% { opacity: 0; transform: translateY(0) rotate(var(--rot)); } 10% { opacity: 0.8; } 90% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--rot) + 280deg)); } }

/* ---- Reduced motion: no zoom, no particles, no word animation, no autoplay (manual only, crossfade) ---- */
@media (prefers-reduced-motion: reduce) {
  .fx { display: none; }
  .slide, .slide.is-active { transition: opacity 0.4s ease, visibility 0s; }
  .seg.is-active i::after { transform: scaleX(1); }
  .pp { display: none; }
}

/* ---- Nov 2 2026: more party (Hanson: "this is entertainment, bring on the excitement"). Home page only, CSS only, off under reduced motion. ---- */
.drift .note { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h9v4h-7v10.5A3.5 3.5 0 1 1 10 14.3V3z'/%3E%3C/svg%3E"); }
.drift .note2 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4l13-2v14.5a3 3 0 1 1-2-2.8V6.2l-9 1.4v10.9a3 3 0 1 1-2-2.8V4z'/%3E%3C/svg%3E"); background: #28D7FF; filter: drop-shadow(0 0 6px rgba(40, 215, 255, 0.6)); }
.drift .note.v { background: #B66BFF; filter: drop-shadow(0 0 6px rgba(182, 107, 255, 0.6)); }
.drift .note2.c { background: #FFC93C; filter: drop-shadow(0 0 6px rgba(255, 201, 60, 0.5)); }

/* Pillar icons: neon glyph in a glowing ring, gently bobbing; brighter on hover */
.pillar-ico { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 14px; border-radius: 18px; background: radial-gradient(circle at 30% 25%, rgba(255, 63, 164, 0.28), rgba(111, 54, 255, 0.16) 60%, transparent 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 22px rgba(255, 63, 164, 0.25); animation: icobob 3.2s ease-in-out infinite alternate; }
.pillar-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 22px; border: 1px solid rgba(40, 215, 255, 0.35); opacity: 0; animation: icoring 3.2s ease-out infinite; }
.card:hover .pillar-ico { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 34px rgba(255, 63, 164, 0.5), 0 0 60px rgba(40, 215, 255, 0.2); }
.card:hover @keyframes icobob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes icoring { 0% { opacity: 0.7; transform: scale(0.92); } 100% { opacity: 0; transform: scale(1.25); } }

/* Step numbers glow like stage lights */
#how .step-num { position: relative; display: inline-grid; place-items: center; min-width: 52px; height: 52px; isolation: isolate; }
#how .step-num::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(40, 215, 255, 0.16), transparent 70%); animation: numglow 2.4s ease-in-out infinite alternate; }
#how .step:nth-child(2) .step-num::before { animation-delay: -0.8s; } #how .step:nth-child(3) .step-num::before { animation-delay: -1.6s; }
@keyframes numglow { from { box-shadow: 0 0 0 1px rgba(40, 215, 255, 0.35), 0 0 12px rgba(40, 215, 255, 0.25); } to { box-shadow: 0 0 0 1px rgba(255, 63, 164, 0.6), 0 0 26px rgba(255, 63, 164, 0.5); } }

/* Primary buttons on the home page breathe a soft neon glow */
.btn-primary { animation: btnglow 2.6s ease-in-out infinite; }
@keyframes btnglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 63, 164, 0), 0 0 14px rgba(255, 63, 164, 0.25); } 50% { box-shadow: 0 0 0 4px rgba(255, 63, 164, 0.12), 0 0 30px rgba(255, 63, 164, 0.5); } }

/* Download band = the after-party: moving aurora, sweeping spotlights, confetti, notes, equalizer */
.party-band { position: relative; overflow: hidden; isolation: isolate; }
.party-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.party-fx .aurora { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: 0.35; }
.party-fx .a1 { left: -25vmax; top: -30vmax; background: radial-gradient(circle, #FF3FA4, transparent 65%); animation: aur1 14s ease-in-out infinite alternate; }
.party-fx .a2 { right: -25vmax; bottom: -35vmax; background: radial-gradient(circle, #28D7FF, #6F36FF 40%, transparent 68%); animation: aur2 17s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform: translate3d(18vmax, 10vmax, 0) scale(1.15); } }
@keyframes aur2 { to { transform: translate3d(-16vmax, -8vmax, 0) scale(1.1); } }
.party-fx .spot { position: absolute; top: -10%; width: 22vmax; height: 130%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 63, 164, 0.05) 60%, transparent); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(6px); mix-blend-mode: screen; }
.party-fx .s1 { left: 12%; animation: sweep 7s ease-in-out infinite alternate; } .party-fx .s2 { right: 12%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(40, 215, 255, 0.06) 60%, transparent); animation: sweep 8s ease-in-out -3s infinite alternate-reverse; }
@keyframes sweep { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.party-fx .confetti, .party-fx .drift { position: absolute; inset: 0; }
.confetti.wide i { animation-duration: calc(var(--dur) * 0.8); }
.party-fx .eq.eq-s { left: 4%; right: 4%; bottom: 0; height: 12%; gap: 4px; opacity: 0.3; }
.party-band .store { position: relative; backdrop-filter: blur(6px); }
.party-band a.store { border-color: rgba(40, 215, 255, 0.55); box-shadow: 0 0 24px rgba(40, 215, 255, 0.25); animation: storeglow 2.4s ease-in-out infinite; }
.party-band a.store strong { background: linear-gradient(90deg, #fff, #28D7FF, #FF3FA4, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 3s linear infinite; }
@keyframes storeglow { 0%, 100% { box-shadow: 0 0 18px rgba(40, 215, 255, 0.22); } 50% { box-shadow: 0 0 36px rgba(40, 215, 255, 0.5), 0 0 60px rgba(255, 63, 164, 0.25); } }
@media (max-width: 767px) { .party-fx .spot { width: 40vmax; } .party-fx .eq.eq-s { height: 18%; } }

@media (prefers-reduced-motion: reduce) {
  .party-fx .confetti, .party-fx .drift, .party-fx .eq, .party-fx .spot { display: none; }
  .party-fx .aurora, .pillar-ico, .pillar-ico::after, #how .step-num::before, .btn-primary, .party-band a.store, .party-band a.store strong { animation: none; }
}
.pillar-ico img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(255, 63, 164, 0.45)); transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1); }
.grid.four .card:nth-child(2) .pillar-ico { animation-delay: -0.8s; } .grid.four .card:nth-child(3) .pillar-ico { animation-delay: -1.6s; } .grid.four .card:nth-child(4) .pillar-ico { animation-delay: -2.4s; }

/* Party gallery (bento): one big stage, four side shots, neon frames and caption chips. Phones: a swipe row. */
.gallery { position: relative; overflow: hidden; isolation: isolate; }
.gal-glow { position: absolute; inset: 10% -10% 0; z-index: -1; background: radial-gradient(40% 50% at 25% 60%, rgba(255, 63, 164, 0.22), transparent 70%), radial-gradient(40% 50% at 80% 40%, rgba(40, 215, 255, 0.18), transparent 70%); filter: blur(20px); animation: aur1 16s ease-in-out infinite alternate; }
.bento { margin-top: clamp(22px, 3vw, 40px); display: grid; gap: clamp(12px, 1.4vw, 20px); }
.ptile { position: relative; margin: 0; border-radius: 20px; overflow: hidden; isolation: isolate; background: #120c24; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.ptile::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #FF3FA4, #6F36FF 45%, #28D7FF 70%, #FF3FA4); background-size: 300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; animation: gborder 8s linear infinite; pointer-events: none; transition: opacity 0.3s; }
.ptile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(8, 5, 20, 0.85)); pointer-events: none; }
.ptile picture, .ptile img { display: block; width: 100%; height: 100%; }
.ptile img { object-fit: cover; transform: scale(1.02); transition: transform 0.8s cubic-bezier(.2, .7, .2, 1); }
.ptile:hover img { transform: scale(1.09); }
.ptile:hover::before { opacity: 1; }
.ptile:hover { box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 63, 164, 0.35); }
.ptile figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; font: 700 0.875rem/1 var(--font-display); color: #fff; letter-spacing: 0.02em; background: rgba(12, 8, 30, 0.6); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ptile figcaption i { width: 8px; height: 8px; border-radius: 50%; background: #FF3FA4; box-shadow: 0 0 0 0 rgba(255, 63, 164, 0.7); animation: livepulse 1.8s ease-out infinite; }
.g-friends figcaption i, .g-room figcaption i { background: #28D7FF; } .g-trophy figcaption i { background: #FFC93C; }
.g-stage figcaption { font-size: 1rem; padding: 9px 16px 9px 12px; left: 20px; bottom: 20px; }
@keyframes gborder { to { background-position: 300% 0; } }
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, minmax(150px, 15vw)) minmax(180px, 17vw); }
  .g-stage { grid-column: 1 / 5; grid-row: 1 / 3; }
  .g-friends { grid-column: 5 / 7; grid-row: 1; }
  .g-phone { grid-column: 5 / 7; grid-row: 2; }
  .g-room { grid-column: 1 / 4; grid-row: 3; }
  .g-trophy { grid-column: 4 / 7; grid-row: 3; }
}
@media (max-width: 959px) {
  .bento { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .bento::-webkit-scrollbar { display: none; }
  .ptile { aspect-ratio: 4 / 3; scroll-snap-align: start; }
}

/* Download band: the neon sound-wave picture glows under the party */
.party-fx { background: url("/img/party/party-wave-1280.webp") center 85% / cover no-repeat; }
.party-fx::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-midnight) 0, rgba(11, 8, 32, 0.55) 30%, rgba(11, 8, 32, 0.35) 70%, var(--c-midnight) 100%); }
@media (min-width: 1280px) { .party-fx { background-image: url("/img/party/party-wave-2172.webp"); } }

@media (prefers-reduced-motion: reduce) {
  .gal-glow, .ptile::before, .ptile figcaption i { animation: none; } .ptile img { transition: none; }
}

/* Nov 2 2026 (Hanson): pillar cards read "icon | text": icon on the left, title and line on the right */
#pillars .card { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-content: center; }
#pillars .card .pillar-ico { grid-row: 1 / span 2; align-self: center; width: 88px; height: 88px; margin-bottom: 0; }
#pillars .card .pillar-ico img { width: 76px; height: 76px; }
#pillars .card h3 { margin-top: 0; margin-bottom: 4px; align-self: end; }
#pillars .card p { grid-column: 2; margin-bottom: 0; align-self: start; }
@media (min-width: 768px) and (max-width: 1359px) { #pillars .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Nov 2 2026 (Hanson: "the page is too long"): personal and venue plans share one section as two tabs; shorter gallery; tighter phone spacing */
.ptabs > input { position: absolute; opacity: 0; pointer-events: none; }
.ptab-bar { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: clamp(18px, 2.4vw, 28px); border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ptab-bar label { padding: 10px 20px; border-radius: 999px; font: 700 0.9375rem/1 var(--font-display); color: var(--c-text-dim); cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.ptab-bar label:hover { color: #fff; }
#ptab-you:checked ~ .ptab-bar label[for="ptab-you"], #ptab-venue:checked ~ .ptab-bar label[for="ptab-venue"] { background: var(--cta-gradient); color: #fff; box-shadow: 0 0 22px rgba(255, 63, 164, 0.4); }
#ptab-you:focus-visible ~ .ptab-bar label[for="ptab-you"], #ptab-venue:focus-visible ~ .ptab-bar label[for="ptab-venue"] { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.ptab { display: none; } #ptab-you:checked ~ .ptab-you, #ptab-venue:checked ~ .ptab-venue { display: block; animation: fadeup 0.35s ease both; }
.ptab .venue-head { margin-top: 0; }
@media (min-width: 960px) { .bento { grid-template-rows: repeat(2, minmax(130px, 11vw)) minmax(150px, 12vw); } }
@media (max-width: 767px) {
  .block { padding-block: clamp(36px, 9vw, 56px); }
  #pillars .card { padding: 16px; }
  #pillars .grid.four { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { #ptab-you:checked ~ .ptab-you, #ptab-venue:checked ~ .ptab-venue { animation: none; } }

/* Venue pricing, redesigned: one glass box with the 3 TV tiers side by side, "every plan includes" chips once, AI Host add-on, then a party trial banner */
.vbox { position: relative; border-radius: 24px; padding: clamp(16px, 2.4vw, 28px); background: linear-gradient(160deg, rgba(40, 24, 80, 0.65), rgba(14, 10, 30, 0.85)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 20px 60px rgba(0, 0, 0, 0.35); }
.vtiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.vtier { position: relative; padding: clamp(14px, 1.8vw, 22px) clamp(10px, 1.6vw, 20px); border-radius: 18px; text-align: center; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.3s, box-shadow 0.3s, background 0.3s; }
.vtier:hover { transform: translateY(-4px); background: rgba(255, 63, 164, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 63, 164, 0.5), 0 0 30px rgba(255, 63, 164, 0.25); }
.vtier h3 { margin: 6px 0 2px; font-size: clamp(0.9375rem, 1.4vw, 1.125rem); }
.vtier .price { margin: 0; justify-content: center; }
.vtier .amt { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.vt-tvs { display: inline-flex; gap: 4px; height: 22px; align-items: flex-end; }
.vt-tvs i { width: 18px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, #FF3FA4, #28D7FF); box-shadow: 0 0 10px rgba(40, 215, 255, 0.5); position: relative; }
.vt-tvs i::after { content: ""; position: absolute; left: 7px; bottom: -4px; width: 4px; height: 3px; background: rgba(255, 255, 255, 0.5); }
.vincl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: clamp(14px, 1.8vw, 20px); }
.vincl-h { font: 700 0.8125rem/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-cyan); }
.vincl ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vincl li { padding: 7px 12px 7px 26px; border-radius: 999px; font-size: 0.875rem; color: var(--c-text); background: rgba(40, 215, 255, 0.08) no-repeat 9px 50% / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%2328D7FF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: inset 0 0 0 1px rgba(40, 215, 255, 0.25); }
.vaddon { display: flex; align-items: center; gap: 14px; margin-top: clamp(14px, 1.8vw, 20px); padding-top: clamp(14px, 1.8vw, 20px); border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.vaddon img { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 4px 12px rgba(255, 63, 164, 0.45)); }
.vaddon h3 { margin: 2px 0; font-size: 1.0625rem; } .vaddon p { margin: 0; color: var(--c-text-dim); font-size: 0.9375rem; }
.vtag { display: inline-block; padding: 3px 8px; border-radius: 6px; font: 700 0.6875rem/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: #FFC93C; background: rgba(255, 201, 60, 0.12); }
.vtrial { position: relative; display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); flex-wrap: wrap; margin-top: clamp(14px, 1.8vw, 20px); padding: clamp(16px, 2.2vw, 24px); border-radius: 24px; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, rgba(255, 63, 164, 0.22), rgba(111, 54, 255, 0.22) 50%, rgba(40, 215, 255, 0.18)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 40px rgba(255, 63, 164, 0.2); }
.vtrial::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat; animation: trialshine 4s ease-in-out infinite; }
.vtrial img { width: 64px; height: 64px; flex: none; animation: icobob 2.6s ease-in-out infinite alternate; }
.vtrial > div { flex: 1 1 240px; min-width: 0; } .vtrial .free { font: 800 clamp(1.25rem, 2.2vw, 1.5rem)/1.2 var(--font-display); color: #fff; } .vtrial p { margin: 4px 0 0; }
@keyframes trialshine { 0%, 40% { background-position: -100% 0; } 100% { background-position: 200% 0; } }
@media (max-width: 599px) { .vtrial .btn { width: 100%; } .vt-tvs i { width: 14px; } .vtier h3 { font-size: 0.875rem; } }
@media (prefers-reduced-motion: reduce) { .vtrial::before, .vtrial img { animation: none; } .vtier { transition: none; } }
.js .ptab .reveal { opacity: 1; transform: none; } /* the tab itself fades in; hidden tabs never get the scroll reveal */

/* Events & winners teaser: text on the left, a glowing 1-2-3 podium with the trophy on the right */
.evx { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(16px, 3vw, 40px); padding: clamp(20px, 3vw, 36px) clamp(20px, 3.4vw, 44px); border-radius: 24px; overflow: hidden; isolation: isolate; background: radial-gradient(60% 90% at 85% 60%, rgba(255, 201, 60, 0.14), transparent 70%), linear-gradient(150deg, rgba(40, 24, 80, 0.6), rgba(14, 10, 30, 0.85)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 20px 60px rgba(0, 0, 0, 0.35); }
.evx-copy h2 { margin: 10px 0 8px; } .evx-copy p { margin: 0 0 14px; }
.evx-link { font: 700 0.9375rem/1.2 var(--font-ui); color: var(--c-cyan); text-decoration: none; } .evx-link:hover span { display: inline-block; transform: translateX(4px); transition: transform 0.2s; }
.evx-art { position: relative; height: clamp(170px, 18vw, 220px); }
.podium { position: absolute; inset: auto 6% 0 6%; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; }
.pd { position: relative; display: grid; place-items: center; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 24px rgba(111, 54, 255, 0.3); }
.pd b { font: 800 clamp(1.25rem, 2vw, 1.75rem)/1 var(--font-display); color: rgba(255, 255, 255, 0.85); }
.p1 { height: 62%; min-height: 70px; background: linear-gradient(180deg, rgba(255, 201, 60, 0.45), rgba(255, 63, 164, 0.15)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 34px rgba(255, 201, 60, 0.35); }
.p2 { height: 44%; min-height: 50px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 26px rgba(200, 220, 255, 0.25); } .p3 { height: 32%; min-height: 40px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 24px rgba(205, 127, 50, 0.3); }
.pd img { position: absolute; bottom: 100%; left: 50%; height: auto; transform: translateX(-50%); animation: icobob 3.2s ease-in-out infinite alternate; }
.p2 img { width: clamp(52px, 6vw, 76px); filter: grayscale(1) brightness(1.35) drop-shadow(0 6px 16px rgba(200, 220, 255, 0.45)); animation-delay: -1s; }
.p3 img { width: clamp(46px, 5vw, 66px); filter: sepia(1) saturate(2.2) hue-rotate(-18deg) brightness(0.85) drop-shadow(0 6px 16px rgba(205, 127, 50, 0.5)); animation-delay: -2s; }
.p1 img { position: absolute; bottom: 100%; left: 50%; width: clamp(70px, 8vw, 104px); height: auto; transform: translateX(-50%); filter: drop-shadow(0 6px 18px rgba(255, 201, 60, 0.5)); animation: icobob 2.8s ease-in-out infinite alternate; }
.evx-cal { position: absolute; top: 0; left: 0; width: clamp(48px, 5vw, 64px); height: auto; transform: rotate(-10deg); filter: drop-shadow(0 4px 14px rgba(255, 63, 164, 0.45)); animation: icobob 3.4s ease-in-out -1s infinite alternate; }
.evx-tag { position: absolute; top: 4px; right: 0; padding: 6px 12px; border-radius: 999px; font: 700 0.75rem/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: #FFC93C; background: rgba(255, 201, 60, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 201, 60, 0.35); }
@media (max-width: 767px) { .evx { grid-template-columns: 1fr; } .evx-art { height: 170px; } }
@media (prefers-reduced-motion: reduce) { .pd img, .evx-cal { animation: none; } }

/* Download band, redesigned: copy + store buttons on the left, floating neon phone / mic / heart on the right */
.dl { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(16px, 4vw, 56px); }
.dl-copy .stores { justify-content: flex-start; margin-top: clamp(16px, 2vw, 24px); max-width: 520px; }
.dl-copy h2 { margin: 10px 0 8px; } .dl-copy > p.dim { margin: 0; }
.dl-tv { display: flex; align-items: center; gap: 10px; margin: clamp(14px, 2vw, 22px) 0 0; font-weight: 600; color: var(--c-text-dim); }
.dl-tv img { width: 40px; height: 40px; filter: drop-shadow(0 2px 10px rgba(40, 215, 255, 0.45)); } .dl-tv a { color: var(--c-cyan); text-decoration: none; font-weight: 700; } .dl-tv a:hover span { display: inline-block; transform: translateX(4px); transition: transform 0.2s; }
.dl-art { position: relative; height: clamp(220px, 26vw, 340px); }
.dl-ring { position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 63, 164, 0.28), rgba(111, 54, 255, 0.14) 45%, transparent 68%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); animation: ringpulse 3.6s ease-in-out infinite alternate; }
.dl-art img { position: absolute; height: auto; filter: drop-shadow(0 10px 30px rgba(255, 63, 164, 0.45)); }
.dl-phone { width: 52%; left: 24%; top: 6%; animation: icobob 3s ease-in-out infinite alternate; }
.dl-mic { width: 30%; left: 2%; bottom: 4%; transform: rotate(-12deg); animation: icobob 3.6s ease-in-out -1.2s infinite alternate; }
.dl-heart { width: 26%; right: 2%; top: 10%; transform: rotate(10deg); animation: icobob 3.2s ease-in-out -2s infinite alternate; }
@media (max-width: 767px) { .dl { grid-template-columns: 1fr; text-align: left; } .dl-art { height: 150px; order: -1; margin-bottom: -6px; } .dl-copy .stores { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .dl-ring, .dl-art img { animation: none; } }
@media (min-width: 768px) { .party-band .party-fx::after { background: linear-gradient(90deg, rgba(11, 8, 32, 0.85) 0, rgba(11, 8, 32, 0.55) 45%, rgba(11, 8, 32, 0.2) 75%), linear-gradient(180deg, var(--c-midnight) 0, transparent 25%, transparent 75%, var(--c-midnight) 100%); } }
/* Footer: neon line on top and a soft glow so the page ends on the same party note */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #FF3FA4 20%, #6F36FF 50%, #28D7FF 80%, transparent); box-shadow: 0 0 18px rgba(255, 63, 164, 0.6); background-size: 200% 100%; animation: sheen 6s linear infinite; }
.site-footer::after { content: ""; position: absolute; left: 50%; top: 0; width: min(80vw, 900px); height: 140px; transform: translateX(-50%); background: radial-gradient(50% 100% at 50% 0, rgba(196, 44, 255, 0.18), transparent 70%); pointer-events: none; }
.site-footer .links a { transition: color 0.2s, text-shadow 0.2s; } .site-footer .links a:hover { color: #fff; text-shadow: 0 0 12px rgba(255, 63, 164, 0.8); }
@media (prefers-reduced-motion: reduce) { .site-footer::before { animation: none; } }
@media (min-width: 1024px) { .evx-copy p, .dl-copy > p.dim, .ptab-venue .venue-head p { white-space: nowrap; max-width: none; } }

/* Plans heading (Hanson): one line, each plan in its own colour; the card titles match. */
.plans-h { white-space: nowrap; font-size: clamp(1.5rem, 5.6vw, 2.75rem); }
.plans-h .pl-dot { color: var(--c-muted, #8f86b0); margin: 0 0.35em; font-weight: 400; }
.pl-free { color: var(--c-cyan); } .pl-pro { color: var(--c-pink); } .pl-home { color: var(--c-gold); }
/* Plan cards (Hanson): plan name and price on one line, name left, price right. */
.plan-grid .price-card { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
.plan-grid .price-card > h3, .plan-grid .price-card > .price { margin-top: 0; margin-bottom: 0; }
.plan-grid .price-card > .price { white-space: nowrap; }
.plan-grid .price-card > :not(h3):not(.price) { grid-column: 1 / -1; }