/* The venue landing (/venue for a visitor), v2 2026-09-29: a dark stage with moving light, not a brochure.
   Loaded only by templates/venue/landing.html (body.vl-page). Every loop animates transform or opacity only.
   The product demos (phone, duel, lineup) are drawn in their finished state; /js/venue-landing.js adds .vl-loop
   and the step classes to play them, and never does under reduced motion, so the page always reads without it. */

body.vl-page {
  --vl-bg: #07070b;
  --vl-card: #15141f;
  --vl-ink: #f7f5ff;
  --vl-ink-2: rgba(247, 245, 255, .74);
  --vl-ink-3: rgba(247, 245, 255, .52);
  --vl-line: rgba(255, 255, 255, .1);
  --vl-line-2: rgba(255, 255, 255, .18);
  --vl-hot: #ff5a1f;
  --vl-pink: #ff2e93;
  --vl-violet: #8b5cff;
  --vl-cyan: #2de2ff;
  --vl-ok: #3dffa0;
  --vl-amber: #ffc53d;
  background: var(--vl-bg);
  color: var(--vl-ink);
}
html:has(body.vl-page) { color-scheme: dark; background: #07070b; }

/* ---------- top bar and footer, this page only ---------- */
.vl-page .topbar { background: rgba(7, 7, 11, .72); border-bottom-color: transparent; }
.vl-page .topbar.scrolled { border-bottom-color: var(--vl-line); }
.vl-page .brand { color: var(--vl-ink); }
.vl-page .brand { flex-shrink: 0; }
.vl-page .topnav a:not(.btn) { color: var(--vl-ink-2); }
.vl-page .topnav a:not(.btn):hover { color: var(--vl-ink); }
.vl-page .topnav .find-link:not(.in-tabs) { color: var(--vl-ink); }
.vl-page .topnav a:not(.help-btn):not(.in-tabs) { min-height: 44px; display: inline-flex; align-items: center; }
.vl-page .topnav .start-build { background: var(--vl-ink); border-color: var(--vl-ink); color: #0b0710; }
.vl-page .topnav .start-build:hover { background: #fff; border-color: #fff; }
.vl-page .help-btn { width: 44px; height: 44px; background: rgba(255, 255, 255, .06); border-color: var(--vl-line-2); color: var(--vl-ink-2) !important; }
.vl-page .help-btn:hover { border-color: var(--vl-ink); color: var(--vl-ink) !important; }
.vl-page .footer { margin-top: 0; border-top-color: var(--vl-line); color: var(--vl-ink-3); background: var(--vl-bg); }
.vl-page .footer nav a { color: var(--vl-ink-2); }
.vl-page .footer nav a:hover { color: var(--vl-ink); }
@media (max-width: 720px) {
  /* signed-in: keep the phone tab links in the tab bar, not wrapped above the mark */
  .vl-page .topnav.member .in-tabs { display: none; }
  .vl-page .topbar { flex-wrap: nowrap; }
  .vl-page .topnav.member { flex-wrap: nowrap; }
  /* html is the scrolling root (document.scrollingElement); focused Get started fields stay above the tab bar */
  html:has(body.vl-page nav.tabbar) {
    scroll-padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + 1rem);
  }
  body.vl-page:has(nav.tabbar) {
    padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + 1rem);
  }
  body.vl-page:has(nav.tabbar) .vl-hero,
  body.vl-page:has(nav.tabbar) .vl-start {
    padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + 2rem);
  }
}
@media (max-width: 600px) {
  /* one row: the mark, Find a DJ, Sign in, List your venue, ? (Blog stays in the footer).
     8px gap beats the shared find-link negative margin so Find a DJ and Sign in stay two words. */
  .vl-page .topbar { padding-inline: 8px; }
  .vl-page .brand { padding: 8px 2px; margin: -8px -2px; }
  .vl-page .topnav { flex-wrap: nowrap; gap: 8px; }
  .vl-page .topnav a { white-space: nowrap; }
  .vl-page .topnav .find-link:not(.in-tabs) { margin-right: 0; }
  .vl-page .topnav a.blog-link { display: none; }
  /* beats the 44px inline-flex on a:not(.help-btn):not(.in-tabs); desktop Blog is outside this query */
  .vl-page .topnav a.blog-link:not(.in-tabs) { display: none; }
  .vl-page .topnav .start-build { min-height: 44px; padding-inline: 8px; }
  .vl-page .footer nav { gap: 0 .4rem; }
  .vl-page .footer nav a { min-height: 44px; min-width: 44px; padding-inline: 6px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 349.98px) {
  /* /venue only: drop header Sign in so Find a DJ + List your venue + ? fit. Log in stays under GET STARTED. */
  .vl-page .topnav a[href^="/login"]:not(.in-tabs) { display: none; }
}

/* ---------- the page ---------- */
.vl { position: relative; overflow-x: clip; background: var(--vl-bg); color: var(--vl-ink); }
.vl-wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; }
.vl h1, .vl h2, .vl h3 { color: var(--vl-ink); }
.vl a { color: inherit; }
.vl-sec { padding-block: clamp(64px, 9vw, 120px); }
.vl-kicker { margin: 0 0 14px; font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--vl-cyan); }
.vl h2 { font-family: var(--font-brand); font-weight: 400; text-transform: uppercase; font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: .95; letter-spacing: 0; margin: 0; }
.vl-hot {
  background: linear-gradient(90deg, var(--vl-hot), var(--vl-pink) 60%, var(--vl-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.vl-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--vl-ink-2); max-width: 40ch; margin: 18px 0 0; }
.vl-note { font-size: .95rem; line-height: 1.55; color: var(--vl-ink-3); max-width: 58ch; margin: 16px 0 0; }

/* film grain over everything, fixed so it never adds height or width */
.vl-grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; opacity: .07; }
.vl-grain::before {
  content: ""; position: absolute; inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: vl-grain 1s steps(6) infinite;
}
@keyframes vl-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-40px, 30px); } 40% { transform: translate(30px, -50px); }
  60% { transform: translate(-60px, -20px); } 80% { transform: translate(50px, 40px); } 100% { transform: translate(0, 0); }
}

/* ---------- hero: a stage with sweeping light ---------- */
.vl-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(36px, 6vw, 84px) 0 clamp(56px, 8vw, 104px); }
.vl-stage {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(139, 92, 255, .32), transparent 70%),
    radial-gradient(ellipse 45% 40% at 90% 100%, rgba(255, 46, 147, .16), transparent 70%),
    linear-gradient(180deg, #0b0a12 0%, var(--vl-bg) 100%);
}
.vl-stage::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 40% at 50% 0%, rgba(255, 90, 31, .24), transparent 70%);
  animation: vl-haze 6s ease-in-out infinite alternate;
}
@keyframes vl-haze { from { opacity: .35; } to { opacity: 1; } }
.vl-beam {
  position: absolute; top: -60px; left: calc(var(--x) - 450px); width: 900px; height: 1100px;
  transform-origin: 50% 0; mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 0%, transparent 0deg 166deg, var(--c) 180deg, transparent 194deg 360deg);
  -webkit-mask-image: linear-gradient(#000 10%, transparent 85%); mask-image: linear-gradient(#000 10%, transparent 85%);
  animation: vl-sweep var(--t) ease-in-out infinite alternate;
}
.vl-beam-1 { --x: 12%; --c: rgba(255, 46, 147, .55); --a: 24deg; --t: 8s; }
.vl-beam-2 { --x: 50%; --c: rgba(139, 92, 255, .6); --a: 30deg; --t: 11s; animation-delay: -4s; }
.vl-beam-3 { --x: 88%; --c: rgba(45, 226, 255, .42); --a: 26deg; --t: 9.5s; animation-delay: -2s; }
@keyframes vl-sweep { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(var(--a)); } }

.vl-hero-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.vl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 15px 8px 12px;
  border: 1px solid var(--vl-line-2); border-radius: 999px; background: rgba(255, 255, 255, .05);
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--vl-ink-2);
  animation: vl-in .7s var(--ease) both;
}
.vl-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.vl-eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--vl-ok); transform-origin: 50% 100%; animation: vl-eq .8s ease-in-out infinite alternate; }
.vl-eq i:nth-child(2) { background: var(--vl-cyan); animation-duration: .6s; animation-delay: -.3s; }
.vl-eq i:nth-child(3) { background: var(--vl-pink); animation-duration: .9s; animation-delay: -.5s; }
.vl-eq i:nth-child(4) { background: var(--vl-amber); animation-duration: .7s; animation-delay: -.1s; }
@keyframes vl-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes vl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.vl-title {
  font-family: var(--font-brand); font-weight: 400; text-transform: uppercase; letter-spacing: -.005em;
  font-size: clamp(2.9rem, 6.6vw, 5.8rem); line-height: .9; margin: 22px 0 24px;
}
.vl-w { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.vl-w > span { display: inline-block; animation: vl-rise .95s var(--ease) both; animation-delay: calc(.12s + var(--i) * .13s); }
@keyframes vl-rise { from { opacity: 0; transform: translateY(105%) rotate(5deg); } to { opacity: 1; transform: none; } }
.vl-title em {
  font-style: normal; display: inline-block;
  background: linear-gradient(95deg, #ffb23d 0%, var(--vl-hot) 30%, var(--vl-pink) 65%, var(--vl-violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 46, 147, .45));
  animation: vl-flicker 6s 1.8s infinite;
}
@keyframes vl-flicker { 0%, 88%, 92%, 96%, 100% { opacity: 1; } 90% { opacity: .55; } 94% { opacity: .8; } }
.vl-lede { font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.5; color: var(--vl-ink-2); max-width: 32ch; margin: 0 0 32px; animation: vl-in .8s .55s var(--ease) both; }
.vl-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 0; animation: vl-in .8s .7s var(--ease) both; }

.vl-go {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 32px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-brand); font-weight: 400; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase;
  color: #0b0710 !important; text-decoration: none !important;
  background: linear-gradient(95deg, #ffb23d, var(--vl-hot) 38%, var(--vl-pink));
  transition: transform .2s var(--ease);
}
.vl-go::before {
  content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: inherit;
  background: linear-gradient(95deg, var(--vl-hot), var(--vl-pink)); filter: blur(18px);
  animation: vl-pulse 2.4s ease-in-out infinite;
}
@keyframes vl-pulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .85; transform: scale(1.08); } }
.vl-go:hover { transform: translateY(-2px) scale(1.02); }
.vl-go:active { transform: scale(.98); }
.vl-go:focus-visible { outline: 3px solid var(--vl-cyan); outline-offset: 4px; }
.vl-arrow { display: inline-block; transition: transform .2s var(--ease); }
.vl-go:hover .vl-arrow { transform: translateX(5px); }
.vl-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 600; color: var(--vl-ink-2) !important; text-decoration: underline; text-decoration-color: var(--vl-line-2); text-underline-offset: 5px; }
.vl-quiet:hover { color: var(--vl-ink) !important; text-decoration-color: var(--vl-ink); }

/* ---------- the phone: the product on a loop ---------- */
.vl-phone-wrap { position: relative; display: flex; justify-content: center; }
.vl-phone-wrap::before {
  content: ""; position: absolute; left: 10%; top: 12%; width: 80%; height: 76%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 147, .5), rgba(139, 92, 255, .28) 45%, transparent 70%);
  filter: blur(34px); animation: vl-glow 5s ease-in-out infinite alternate;
}
@keyframes vl-glow { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
.vl-float { position: relative; perspective: 1200px; animation: vl-float 6s ease-in-out infinite; }
@keyframes vl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.vl-phone {
  font-size: 14px; width: 20.5em; height: 41em; box-sizing: border-box; padding: .65em; border-radius: 3em;
  background: linear-gradient(145deg, #2c2a36, #0d0c12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 40px 80px -24px rgba(0, 0, 0, .85), 0 0 70px rgba(139, 92, 255, .25);
  transition: rotate .25s ease-out;
}
.vl-screen { position: relative; height: 100%; overflow: hidden; border-radius: 2.45em; padding: 0 1em; box-sizing: border-box; background: linear-gradient(180deg, #13111b, #09080e); color: var(--vl-ink); text-align: left; }
.vl-notch { position: absolute; z-index: 3; top: .6em; left: 50%; width: 6.4em; height: 1.65em; margin-left: -3.2em; border-radius: 1em; background: #000; }
.vl-status { display: flex; justify-content: space-between; align-items: center; height: 2.9em; padding: 0 .7em; font-size: .78em; }
.vl-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: .8em; }
.vl-bars i { width: 3px; background: var(--vl-ink); border-radius: 1px; }
.vl-bars i:nth-child(1) { height: 35%; } .vl-bars i:nth-child(2) { height: 55%; } .vl-bars i:nth-child(3) { height: 78%; } .vl-bars i:nth-child(4) { height: 100%; }
.vl-screen-body { transition: opacity .45s; }
.vl-app-head { display: flex; justify-content: space-between; align-items: center; margin: .5em 0 .9em; }
.vl-app-head b { font-family: var(--font-display); font-weight: 800; font-size: 1.35em; letter-spacing: -.01em; }
.vl-app-mark { width: 1.9em; height: 1.9em; border-radius: .6em; background: linear-gradient(135deg, var(--vl-hot), var(--vl-pink)); }

.vl-night {
  position: relative; padding: .9em 1em 1em; border-radius: 1.25em;
  background: linear-gradient(135deg, rgba(139, 92, 255, .26), rgba(255, 46, 147, .12));
  border: 1px solid rgba(255, 255, 255, .12);
  transition: opacity .5s, transform .6s var(--ease);
}
.vl-night::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--vl-ok); box-shadow: 0 0 26px rgba(61, 255, 160, .35); transition: opacity .45s;
}
.vl-night-top { display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.vl-night-day { font-family: var(--font-display); font-weight: 800; font-size: 1.2em; }
.vl-night-time { margin: .35em 0 .55em; font-size: .82em; color: var(--vl-ink-2); }
.vl-night-dj { display: grid; margin: 0; font-size: .85em; font-weight: 700; }
.vl-night-none, .vl-night-set { grid-area: 1 / 1; transition: opacity .35s, transform .45s var(--ease); }
.vl-night-none { color: var(--vl-ink-3); opacity: 0; }
.vl-night-set { color: var(--vl-ok); }
.vl-pill { position: relative; display: inline-grid; }
.vl-pill-open, .vl-pill-booked {
  grid-area: 1 / 1; padding: .3em .75em; border-radius: 999px; text-align: center;
  font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .3s, transform .45s var(--ease);
}
.vl-pill-open { color: var(--vl-amber); background: rgba(255, 197, 61, .12); box-shadow: inset 0 0 0 1px rgba(255, 197, 61, .5); opacity: 0; transform: scale(.6); }
.vl-pill-booked { color: #04140b; background: var(--vl-ok); }
.vl-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.vl-confetti i { position: absolute; left: -.18em; top: -.28em; width: .36em; height: .56em; border-radius: .08em; background: var(--c); opacity: 0; }
@keyframes vl-conf {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-3.6em) rotate(220deg); }
}

.vl-free { display: flex; justify-content: space-between; margin: 1.05em .2em .6em; font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vl-ink-3); transition: opacity .4s; }
.vl-free b { color: var(--vl-ok); }
.vl-pdjs { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.vl-pdj {
  position: relative; display: flex; align-items: center; gap: .7em; padding: .6em .7em; border-radius: 1em;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--vl-line);
  transition: opacity .45s, transform .55s var(--ease);
}
.vl-pdj:nth-child(2) { transition-delay: .12s; }
.vl-pdj:nth-child(3) { transition-delay: .24s; }
.vl-pdj:not(.vl-pdj-pick) { opacity: .45; }
.vl-pdj-pick::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--vl-pink); box-shadow: 0 0 20px rgba(255, 46, 147, .45); transition: opacity .3s;
}
.vl-av { flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .95em; color: #0b0710; }
.vl-av-1 { background: linear-gradient(135deg, var(--vl-amber), var(--vl-hot) 50%, var(--vl-pink)); }
.vl-av-2 { background: linear-gradient(135deg, var(--vl-cyan), var(--vl-violet)); }
.vl-av-3 { background: linear-gradient(135deg, var(--vl-ok), var(--vl-cyan)); }
.vl-pdj-t { display: grid; gap: .3em; min-width: 0; }
.vl-pdj-t b { font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-chips { display: flex; flex-wrap: wrap; gap: .3em; }
.vl-chips i { font-style: normal; font-size: .66em; font-weight: 700; padding: .22em .6em; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--vl-line); color: var(--vl-ink-2); white-space: nowrap; }
.vl-pdj-go { position: relative; margin-left: auto; padding: .5em .9em; border-radius: 999px; background: var(--vl-pink); color: #fff; font-size: .7em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vl-tap, .vl-ripple { position: absolute; left: 50%; top: 50%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; background: rgba(255, 255, 255, .65); opacity: 0; pointer-events: none; }
@keyframes vl-tap { 0% { opacity: .85; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.8); } }

.vl-sheet {
  position: absolute; left: .8em; right: .8em; bottom: 1em; display: grid; padding: .9em; border-radius: 1.25em;
  background: #1d1b28; border: 1px solid var(--vl-line-2); box-shadow: 0 -12px 34px rgba(0, 0, 0, .55);
  transition: opacity .4s, transform .55s var(--ease);
}
.vl-sheet-sent, .vl-sheet-ok { grid-area: 1 / 1; display: flex; align-items: center; gap: .75em; transition: opacity .3s, transform .4s var(--ease); }
.vl-sheet-sent { opacity: 0; transform: translateY(-.6em); }
.vl-sheet-t { display: grid; gap: .1em; min-width: 0; }
.vl-sheet-t b { font-size: 1em; }
.vl-sheet-t small { font-size: .75em; color: var(--vl-ink-3); }
.vl-fee { margin-left: auto; font-family: var(--font-brand); font-weight: 400; font-size: 1.25em; }
.vl-sheet-ic, .vl-check { position: relative; flex: none; width: 2.5em; height: 2.5em; display: grid; place-items: center; }
.vl-sheet-ic { border-radius: .8em; background: rgba(255, 90, 31, .16); }
.vl-sheet-ic svg { width: 1.3em; height: 1.3em; fill: none; stroke: var(--vl-hot); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vl-check { border-radius: 50%; background: var(--vl-ok); }
.vl-check svg { width: 1.35em; height: 1.35em; fill: none; stroke: #04140b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vl-burst { position: absolute; left: 50%; top: 50%; }
.vl-burst i { position: absolute; left: -.1em; top: -.35em; width: .2em; height: .7em; border-radius: 1em; background: var(--vl-ok); opacity: 0; }
.vl-burst i:nth-child(1) { --r: 0deg; } .vl-burst i:nth-child(2) { --r: 45deg; } .vl-burst i:nth-child(3) { --r: 90deg; } .vl-burst i:nth-child(4) { --r: 135deg; }
.vl-burst i:nth-child(5) { --r: 180deg; } .vl-burst i:nth-child(6) { --r: 225deg; } .vl-burst i:nth-child(7) { --r: 270deg; } .vl-burst i:nth-child(8) { --r: 315deg; }
@keyframes vl-ray { 0% { opacity: 1; transform: rotate(var(--r)) translateY(-1.1em) scaleY(.5); } 100% { opacity: 0; transform: rotate(var(--r)) translateY(-2.3em) scaleY(1); } }
@keyframes vl-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.vl-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .9), rgba(255, 46, 147, .35) 38%, transparent 70%); }
@keyframes vl-flash { 0% { opacity: 0; } 14% { opacity: .9; } 100% { opacity: 0; } }

/* the loop: each step class undoes one "before" state (finished state is the default) */
.vl-loop:not(.s1) .vl-night { opacity: 0; transform: translateY(1em) scale(.96); }
.vl-loop:not(.s3) .vl-pdj { opacity: 1; }
.vl-loop:not(.s3) .vl-pdj-pick::after { opacity: 0; }
.vl-loop:not(.s2) .vl-free { opacity: 0; }
.vl-loop:not(.s2) .vl-pdj { opacity: 0; transform: translateX(2.6em); }
.vl-loop:not(.s3) .vl-sheet { opacity: 0; transform: translateY(130%); }
.vl-loop.s3 .vl-tap { animation: vl-tap .65s ease-out; }
.vl-loop:not(.s4) .vl-sheet-sent { opacity: 1; transform: none; }
.vl-loop:not(.s4) .vl-sheet-ok { opacity: 0; transform: translateY(.6em); }
.vl-loop.s4 .vl-check { animation: vl-pop .5s var(--ease); }
.vl-loop.s4 .vl-burst i { animation: vl-ray .7s ease-out; }
.vl-loop:not(.s5) .vl-pill-open { opacity: 1; transform: none; }
.vl-loop:not(.s5) .vl-pill-booked { opacity: 0; transform: scale(.6); }
.vl-loop:not(.s5) .vl-night::after { opacity: 0; }
.vl-loop:not(.s5) .vl-night-none { opacity: 1; }
.vl-loop:not(.s5) .vl-night-set { opacity: 0; transform: translateY(.5em); }
.vl-loop.s5 .vl-confetti i { animation: vl-conf 1.15s cubic-bezier(.1, .7, .3, 1); }
.vl-loop.s5 .vl-flash { animation: vl-flash .9s ease-out; }
.vl-loop.out .vl-screen-body { opacity: 0; }
.vl-reset, .vl-reset *, .vl-reset *::before, .vl-reset *::after { transition: none !important; }
.vl-off *, .vl-off *::before, .vl-off *::after { animation-play-state: paused !important; }   /* a section off screen */

/* ---------- ticker ---------- */
.vl-tickers { position: relative; overflow: hidden; padding: 26px 0 44px; }
.vl-ticker { position: relative; display: flex; overflow: hidden; margin: 0 -40px; transform: rotate(-2deg); }
.vl-ticker-hot { z-index: 1; background: linear-gradient(90deg, var(--vl-hot), var(--vl-pink) 50%, var(--vl-violet)); color: #0b0710; box-shadow: 0 10px 40px -10px rgba(255, 46, 147, .5); }
.vl-ticker-dark { margin-top: -4px; transform: rotate(1.6deg); background: #0f0e16; border-block: 1px solid var(--vl-line-2); }
.vl-track { display: flex; width: max-content; animation: vl-marquee 40s linear infinite; }
.vl-ticker-dark .vl-track { animation-duration: 48s; animation-direction: reverse; }
.vl-track ul { display: flex; list-style: none; margin: 0; padding: 0; }
.vl-track li { display: flex; align-items: center; padding: 14px 0; white-space: nowrap; font-family: var(--font-brand); text-transform: uppercase; font-size: clamp(1.1rem, 2.4vw, 1.75rem); letter-spacing: .01em; }
.vl-track li::after { content: ""; width: .42em; height: .42em; margin: 0 .95em; background: currentColor; transform: rotate(45deg); opacity: .75; }
.vl-ticker-dark li { color: transparent; -webkit-text-stroke: 1.2px rgba(247, 245, 255, .8); }
.vl-ticker-dark li::after { background: var(--vl-cyan); opacity: 1; }
@keyframes vl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- four steps ---------- */
.vl-steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; perspective: 1100px; }
.vl-step {
  position: relative; overflow: hidden; min-height: 290px; padding: 26px 24px 28px; border-radius: 26px; box-sizing: border-box;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, #15141f), #0f0e16 72%);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
}
.vl-step::before {
  content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%); opacity: .55;
}
.vl-step-n { position: relative; display: block; font-family: var(--font-brand); font-size: 4.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 75%, #fff); }
.vl-step-ic { position: absolute; top: 24px; right: 22px; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: rgba(0, 0, 0, .38); border: 1px solid var(--vl-line); }
.vl-step-ic svg { width: 34px; height: 34px; fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: hidden; }
.vl-step h3 { position: relative; margin: 42px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; }
.vl-step p { position: relative; margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--vl-ink-2); }
.vl-ic-dot { fill: var(--c); stroke: none; transform-box: fill-box; transform-origin: center; animation: vl-dot 2.4s var(--ease) infinite; }
@keyframes vl-dot { 0%, 12% { transform: scale(0); } 32% { transform: scale(1.3); } 45%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.vl-ic-lens { animation: vl-scan 3.2s ease-in-out infinite; }
@keyframes vl-scan { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(4px, -3px); } 50% { transform: translate(-3px, 3px); } 75% { transform: translate(3px, 3px); } }
.vl-ic-plane { animation: vl-fly 2.8s var(--ease) infinite; }
@keyframes vl-fly {
  0%, 20% { opacity: 1; transform: translate(0, 0); } 48% { opacity: 0; transform: translate(16px, -16px); }
  49% { opacity: 0; transform: translate(-16px, 16px); } 75%, 100% { opacity: 1; transform: translate(0, 0); }
}
.vl-ic-l { transform-box: fill-box; transform-origin: 0 50%; animation: vl-write 3s var(--ease) infinite; }
.vl-ic-l2 { animation-delay: .2s; } .vl-ic-l3 { animation-delay: .4s; }
@keyframes vl-write { 0% { transform: scaleX(0); } 30%, 82% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* hover tilt (desktop, set by the script as the rotate property so it never fights a reveal's transform) */
.vl .vl-tilt.reveal {
  transition-property: opacity, transform, rotate; transition-duration: .8s, .8s, .25s;
  transition-timing-function: var(--ease), var(--ease), ease-out; transition-delay: var(--d, 0s), var(--d, 0s), 0s;
}

/* ---------- one booking per night ---------- */
.vl-promise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.vl-duel {
  position: relative; overflow: hidden; padding: 26px 22px 30px; border-radius: 30px;
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 255, .26), transparent 62%), #100f17;
  border: 1px solid var(--vl-line-2);
}
.vl-duel-clock { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 22px; font-size: .9rem; font-weight: 700; letter-spacing: .06em; color: var(--vl-ink-2); font-variant-numeric: tabular-nums; }
.vl-duel-clock i { width: 9px; height: 9px; border-radius: 50%; background: var(--vl-pink); animation: vl-blink 1s steps(2) infinite; }
@keyframes vl-blink { 50% { opacity: .2; } }
.vl-duel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; transition: opacity .45s; }
.vl-duel-card {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px 10px 18px; border-radius: 22px; text-align: center;
  background: #1a1925; border: 1px solid var(--vl-line); transition: opacity .45s, transform .5s var(--ease);
}
.vl-duel-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; border: 2px solid var(--vl-ok); box-shadow: 0 0 30px rgba(61, 255, 160, .35); opacity: 0; transition: opacity .45s; }
.vl-duel-card .vl-av { font-size: 1.1rem; width: 2.8em; height: 2.8em; }
.vl-duel-card b { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.15; }
.vl-duel-card small { font-size: .82rem; color: var(--vl-ink-3); }
.vl-duel-act { display: grid; margin-top: 8px; }
.vl-duel-btn, .vl-duel-res { grid-area: 1 / 1; padding: 10px 14px; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: opacity .3s, transform .4s var(--ease); }
.vl-duel-btn { position: relative; overflow: hidden; background: var(--vl-pink); color: #fff; opacity: 0; transform: scale(.8); }
.vl-duel-a .vl-duel-res { background: var(--vl-ok); color: #04140b; }
.vl-duel-b .vl-duel-res { background: rgba(255, 255, 255, .07); color: var(--vl-ink-3); box-shadow: inset 0 0 0 1px var(--vl-line-2); }
.vl-duel-a { transform: scale(1.04); }
.vl-duel-a::after { opacity: 1; }
.vl-duel-b { opacity: .6; transform: scale(.96); }
.vl-bolt { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 197, 61, .12); box-shadow: inset 0 0 0 1px rgba(255, 197, 61, .45); }
.vl-bolt svg { width: 20px; height: 20px; fill: var(--vl-amber); }
@keyframes vl-bolt { 0% { transform: scale(1); } 30% { transform: scale(1.45) rotate(-10deg); } 100% { transform: scale(1); } }
.vl-duel.vl-loop:not(.won) .vl-duel-a, .vl-duel.vl-loop:not(.won) .vl-duel-b { opacity: 1; transform: none; }
.vl-duel.vl-loop:not(.won) .vl-duel-a::after { opacity: 0; }
.vl-duel.vl-loop:not(.won) .vl-duel-btn { opacity: 1; transform: none; }
.vl-duel.vl-loop:not(.won) .vl-duel-res { opacity: 0; transform: scale(.7); }
.vl-duel.vl-loop.tap:not(.won) .vl-duel-btn { transform: scale(.92); }
.vl-duel.vl-loop.tap .vl-ripple { animation: vl-tap .6s ease-out; }
.vl-duel.vl-loop.tap .vl-bolt { animation: vl-bolt .6s ease-out; }
.vl-duel.vl-loop.out .vl-duel-row { opacity: 0; }

/* ---------- lineup on your website ---------- */
.vl-demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; perspective: 1400px; }
.vl-browser {
  overflow: hidden; border-radius: 22px; background: #0f0e16; border: 1px solid var(--vl-line-2);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 90px -24px rgba(139, 92, 255, .45);
}
.vl-browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #1a1924; border-bottom: 1px solid var(--vl-line); }
.vl-browser-bar > i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.vl-browser-bar > i:nth-child(2) { background: #febc2e; } .vl-browser-bar > i:nth-child(3) { background: #28c840; }
.vl-url { flex: 1; min-width: 0; margin-left: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: var(--vl-ink-3); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-browser iframe { display: block; width: 100%; border: 0; background: #fff; }
.vl-example { padding: 22px clamp(14px, 3vw, 26px) 26px; }
.vl-example-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.vl-tag { margin: 0; padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--vl-amber); box-shadow: inset 0 0 0 1px rgba(255, 197, 61, .45); }
.vl-live { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--vl-ink-2); }
.vl-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--vl-ok); box-shadow: 0 0 10px var(--vl-ok); animation: vl-blink 1.4s ease-in-out infinite; }
.vl-example ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; transition: opacity .45s; }
.vl-example li {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 6px 18px; align-items: center;
  padding: 14px 16px 14px 20px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--vl-line);
  transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * .4s);
}
.vl-example li:nth-child(1) { --c: var(--vl-pink); } .vl-example li:nth-child(2) { --c: var(--vl-cyan); } .vl-example li:nth-child(3) { --c: var(--vl-hot); }
.vl-example li::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c, var(--vl-pink)); box-shadow: 0 0 14px var(--c, var(--vl-pink)); }
.vl-example li::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .16) 50%, transparent 75%); transform: translateX(-110%); }
.vl-when b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.vl-when span { font-size: .8rem; color: var(--vl-ink-3); }
.vl-dj { display: block; margin-bottom: 7px; font-weight: 700; font-size: 1.02rem; }
.vl-example .vl-chips i { font-size: .74rem; color: var(--vl-ink); border-color: color-mix(in srgb, var(--c, #fff) 45%, transparent); background: color-mix(in srgb, var(--c, #fff) 14%, transparent); }
.vl-example.vl-loop:not(.go) li { opacity: 0; transform: translateY(16px) scale(.98); }
.vl-example.vl-loop.go li::after { animation: vl-shine 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * .4s + .25s); }
.vl-example.vl-loop.out ol { opacity: 0; }
@keyframes vl-shine { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ---------- plans ---------- */
.vl-plans-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.vl-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px 10px 10px; border-radius: 14px;
  background: var(--vl-amber); color: #1a1200; font-weight: 800; font-size: .98rem; line-height: 1.2;
  box-shadow: 0 12px 34px -12px rgba(255, 197, 61, .7); transform: rotate(-3deg); animation: vl-wobble 3.4s ease-in-out infinite;
}
.vl-badge b { padding: 4px 9px; border-radius: 8px; background: #1a1200; color: var(--vl-amber); text-transform: uppercase; letter-spacing: .08em; }
@keyframes vl-wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg) scale(1.04); } }
.vl-plan-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; perspective: 1100px; }
.vl-plan { position: relative; isolation: isolate; overflow: hidden; padding: 30px 28px 32px; border-radius: 26px; background: #13121b; border: 1px solid var(--vl-line); }
.vl-plan h3 { margin: 0 0 20px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vl-ink-2); }
.vl-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; }
.vl-price b { font-family: var(--font-brand); font-weight: 400; font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.01em; }
.vl-price span { color: var(--vl-ink-3); font-size: .95rem; }
.vl-price a { color: inherit; text-decoration: none; }
.vl-price a:hover b, .vl-price a:focus-visible b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.vl-plan-hot { border-color: transparent; background: transparent; box-shadow: 0 0 70px -14px rgba(255, 46, 147, .5); }
.vl-plan-hot::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; margin: -100% 0 0 -100%;
  background: conic-gradient(var(--vl-hot), var(--vl-pink), var(--vl-violet), var(--vl-cyan), var(--vl-hot));
  animation: vl-spin 5s linear infinite;
}
.vl-plan-hot::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 24px; background: linear-gradient(160deg, #221432, #121019 70%); }
@keyframes vl-spin { to { transform: rotate(1turn); } }
.vl-plan-hot h3 { color: var(--vl-ink); }
.vl-plan-pick { position: absolute; top: 24px; right: 22px; margin: 0; padding: 6px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--vl-hot), var(--vl-pink)); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vl-every { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; }
.vl-every li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--vl-line-2); font-size: .92rem; font-weight: 700; }
.vl-every li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vl-ok); box-shadow: 0 0 10px var(--vl-ok); }

/* ---------- get started ---------- */
.vl-start { scroll-margin-top: 84px; padding-bottom: clamp(72px, 10vw, 130px); }
.vl-start-card {
  position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 4vw, 52px); border-radius: 32px; border: 1px solid var(--vl-line-2);
  background: radial-gradient(ellipse at 0% 0%, rgba(255, 46, 147, .24), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(139, 92, 255, .26), transparent 55%), #111019;
  box-shadow: 0 0 120px -40px rgba(255, 46, 147, .45);
}
.vl-start h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.vl .flash { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; font-weight: 600; }
.vl .flash-ok { background: rgba(61, 255, 160, .12); border: 1px solid rgba(61, 255, 160, .45); color: #bfffe0; }
.vl .flash-error { background: rgba(255, 90, 31, .12); border: 1px solid rgba(255, 90, 31, .5); color: #ffc9b3; }
.vl-form { position: relative; display: grid; gap: 16px; }
.vl-form label { display: grid; gap: 8px; margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .03em; color: var(--vl-ink-2); }
.vl-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.vl-form input, .vl-form textarea {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: 14px 16px; border-radius: 14px;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--vl-line-2); color: var(--vl-ink);
  font: 500 1rem/1.4 var(--font); letter-spacing: normal; transition: border-color .2s, box-shadow .2s;
}
.vl-form textarea { min-height: 110px; resize: vertical; }
.vl-form input::placeholder, .vl-form textarea::placeholder { color: rgba(247, 245, 255, .34); }
.vl-form input:hover, .vl-form textarea:hover { border-color: rgba(255, 255, 255, .32); }
.vl-form input:focus, .vl-form textarea:focus { outline: none; border-color: var(--vl-pink); box-shadow: 0 0 0 4px rgba(255, 46, 147, .22); }
.vl-form input:-webkit-autofill { -webkit-text-fill-color: var(--vl-ink); -webkit-box-shadow: 0 0 0 100px #1b1926 inset; caret-color: var(--vl-ink); }
.vl-form .fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vl-send { justify-self: start; min-width: 190px; margin-top: 6px; }
.vl-login { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--vl-ink) !important; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .vl-hero-in { grid-template-columns: minmax(0, 1fr); }
  .vl-title { font-size: clamp(2.9rem, 12.4vw, 6rem); }
  .vl-lede { max-width: 36ch; }
  .vl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-promise, .vl-demo { grid-template-columns: minmax(0, 1fr); }
  .vl-start-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .vl-plan-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .vl-hero { padding-top: 28px; }
  .vl-ctas { gap: 10px 20px; }
  .vl-go { width: 100%; }
  .vl-phone { font-size: 13px; }
  .vl-steps { grid-template-columns: minmax(0, 1fr); }
  .vl-step { min-height: 0; }
  .vl-step h3 { margin-top: 26px; }
  .vl-duel { padding: 22px 12px 26px; }
  .vl-duel-row { gap: 6px; }
  .vl-duel-card { padding: 18px 6px 16px; }
  .vl-duel-btn, .vl-duel-res { padding: 9px 10px; font-size: .74rem; }
  .vl-bolt { width: 32px; height: 32px; }
  .vl-example li { grid-template-columns: minmax(0, 1fr); }
  .vl-form-row { grid-template-columns: minmax(0, 1fr); }
  .vl-send { width: 100%; }
  .vl-plan { padding: 26px 22px 28px; }
}

/* ---------- reduced motion: nothing moves, everything reads ---------- */
@media (prefers-reduced-motion: reduce) {
  .vl *, .vl *::before, .vl *::after { animation: none !important; transition: none !important; }
  .vl-grain { display: none; }
  .vl-track { width: auto; }
  .vl-track ul { flex-wrap: wrap; justify-content: center; }
  .vl-track ul + ul { display: none; }
  .vl-ticker { margin: 0; }
  .vl-badge { transform: rotate(-3deg); }
}