/* Concept: the page is a dark dance floor, and the phone held up over the crowd is the only sign in the room.
   The whole scene takes its light from whichever request is on the phone. */
@font-face {
  font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 500 900; font-stretch: 62% 125%; font-display: swap;
}
@property --glow { syntax: "<color>"; inherits: true; initial-value: #ff2d6f; }
@property --glow2 { syntax: "<color>"; inherits: true; initial-value: #7a1bff; }
:root {
  --bg: #07060b; --ink: #fff; --dim: #a9a6b8; --gold: #ffcc33; --pink: #ff2d6f; --violet: #7a1bff;
  --display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --sign: -apple-system, BlinkMacSystemFont, "Archivo", "Helvetica Neue", Arial, sans-serif;
  --glow: #ff2d6f; --glow2: #7a1bff;
  color-scheme: dark;
  transition: --glow 1s ease, --glow2 1s ease;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--display); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 10px; }
h1, h2 { font-stretch: 72%; font-weight: 900; text-transform: uppercase; letter-spacing: -.012em; line-height: .88; margin: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
.scene { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 72% 46%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 70%),
  radial-gradient(110% 42% at 45% 100%, color-mix(in srgb, var(--glow2) 78%, transparent), transparent 74%), var(--bg); }
.beam { position: absolute; top: -8%; width: 46vw; min-width: 340px; height: 118%; transform-origin: 50% 0; mix-blend-mode: screen;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 72%, transparent), transparent 82%);
  animation: sweep var(--d) ease-in-out infinite alternate; }
.b1 { --c: var(--glow); --d: 7s; --a: -30deg; --z: 12deg; left: 4%; }
.b2 { --c: var(--glow2); --d: 9s; --a: 22deg; --z: -14deg; left: 26%; }
.b3 { --c: #ffffff; --d: 11s; --a: -10deg; --z: 18deg; left: 48%; opacity: .32; }
.b4 { --c: var(--glow); --d: 8s; --a: 26deg; --z: -8deg; left: 62%; }
.b5 { --c: var(--glow2); --d: 10s; --a: -24deg; --z: 26deg; left: 78%; }
@keyframes sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--z)); } }
.beams { position: absolute; inset: 0; filter: blur(22px); }
.crowd { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 170px; }

.top { position: relative; max-width: 1240px; margin-inline: auto; padding-block: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 700; font-stretch: 100%; }
.brand img { width: 38px; height: 38px; }

.hero-grid { max-width: 1240px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 14px 96px; }
.eyebrow { margin: 0 0 16px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; font-stretch: 100%; color: var(--ink); }
h1 { font-size: clamp(4rem, min(11vw, 18.5vh), 11.2rem); text-wrap: balance; text-shadow: 0 4px 60px rgba(0,0,0,.45); }
h1 em { display: block; font-style: normal; color: var(--glow); filter: brightness(1.12); }

.get { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; }
.badge { display: block; border-radius: 13px; transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.badge img { width: 216px; height: 72px; }
.badge:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 50px color-mix(in srgb, var(--glow) 50%, transparent); }
.scan { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 15px; font-weight: 600; font-stretch: 100%; line-height: 1.2; }
.scan img { width: 72px; height: 72px; background: #fff; padding: 5px; border-radius: 11px; }
.android { display: none; margin: 0; font-size: 19px; font-weight: 700; font-stretch: 100%; }
.is-android .android { display: block; }
.is-android .badge, .is-android .scan { display: none; }
@media (hover: none), (pointer: coarse) { .scan { display: none; } }

/* ---------- Phone ---------- */
.phone { position: relative; aspect-ratio: 9 / 19.5; border-radius: 13% / 6%; padding: 2.6%; background: linear-gradient(145deg, #4a4954, #17161d 40%, #0c0b10); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); overflow: hidden; }
.phone > img { width: 100%; height: 100%; object-fit: cover; border-radius: 11% / 5.2%; }
.stage { display: flex; justify-content: center; perspective: 1300px; }
.live { width: min(100%, 372px, calc((100vh - 120px) * 9 / 19.5)); container-type: inline-size; transform: rotateY(var(--ry, -9deg)) rotateX(var(--rx, 3deg)) rotateZ(3deg); transition: transform .35s ease-out;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 40px 110px color-mix(in srgb, var(--glow) 62%, transparent), 0 0 190px color-mix(in srgb, var(--glow2) 50%, transparent); overflow: visible; }
.island { position: absolute; z-index: 3; top: 4.4%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.sign { position: relative; width: 100%; height: 100%; border-radius: 11% / 5.2%; overflow: hidden; display: flex; flex-direction: column; padding: 15% 6% 8%; font-family: var(--sign); background: var(--s-bg, #000); transition: background .5s ease; }
.sign-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 16cqw; flex: none; }
.sign-note { color: var(--s-artist, #ffcc33); font-size: 4cqw; font-weight: 800; letter-spacing: .16em; border-left: 1.2cqw solid currentColor; padding-left: 2.4cqw; min-width: 0; }
.sign-qr { width: 15cqw; height: 15cqw; background: #fff; padding: 1.2cqw; border-radius: 2cqw; flex: none; }
.sign-title, .sign-artist { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 0; overflow: hidden; transition: opacity .25s ease; }
.sign-title { flex: 62 1 0; color: var(--s-title, #fff); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; font-size: 22cqw; }
.sign-artist { flex: 34 1 0; color: var(--s-artist, #ffcc33); font-weight: 700; line-height: 1.08; font-size: 11cqw; }
.sign-title span, .sign-artist span { display: block; }
.sign-sep { display: flex; justify-content: center; align-items: center; gap: 2cqw; padding-block: 3cqw; color: var(--s-artist, #ffcc33); flex: none; }
.sign-sep i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: currentColor; opacity: .4; }
.sign-sep b { width: 18cqw; height: .6cqw; background: currentColor; opacity: .75; }
.swapping .sign-title, .swapping .sign-artist, .swapping .sign-note { opacity: 0; }
.sign-note { transition: opacity .25s ease; }

/* ---------- Steps ---------- */
.steps { max-width: 1240px; margin-inline: auto; padding: 96px max(20px, env(safe-area-inset-right)) 104px max(20px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); }
.step { display: grid; gap: 28px; }
.step h2 { font-size: clamp(2.5rem, 5.4vw, 5.2rem); line-height: .92; min-height: 1.84em; }
.step .phone { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 26px 80px rgba(122, 27, 255, .3); }
.step:nth-child(2) { margin-top: 56px; }
.step:nth-child(3) { margin-top: 112px; }

/* ---------- Wall of signs ---------- */
.wall { padding-block: 40px 104px; overflow: hidden; }
.wall h2 { max-width: 1240px; margin: 0 auto 44px; padding-inline: 20px; font-size: clamp(3.4rem, 10vw, 9.6rem); color: var(--gold); }
.row { display: flex; gap: 18px; width: max-content; margin-bottom: 18px; animation: slide 46s linear infinite; }
.row.rev { animation-direction: reverse; animation-duration: 54s; }
@keyframes slide { to { transform: translateX(calc(-50% - 9px)); } }
.tile { width: clamp(280px, 30vw, 430px); aspect-ratio: 16 / 9.4; border-radius: 22px; padding: clamp(16px, 2vw, 26px); display: flex; flex-direction: column; justify-content: space-between; flex: none; font-family: var(--sign); background: var(--tb); color: var(--tt); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.tile small { color: var(--ta); font-size: clamp(12px, 1vw, 14px); font-weight: 800; letter-spacing: .14em; }
.tile b { font-size: clamp(38px, 4.7vw, 68px); font-weight: 900; line-height: .98; letter-spacing: -.025em; }
.t-classic { --tb: #000; --tt: #fff; --ta: #ffcc33; }
.t-mono { --tb: #fff; --tt: #000; --ta: #555; }
.t-neon { --tb: #0a0014; --tt: #00ffea; --ta: #ff4dff; }
.t-gold { --tb: #17120a; --tt: #ffd86b; --ta: #fff; }
.t-sunset { --tb: #1a0033; --tt: #ffeb3b; --ta: #ff6b9d; }
.t-ice { --tb: #001a2e; --tt: #fff; --ta: #7bdfff; }

/* ---------- End ---------- */
.end { text-align: center; padding: 104px 20px 96px; background: linear-gradient(120deg, #ff2d6f, #c01fd0 55%, #7a1bff); color: #fff; display: grid; justify-items: center; }
.end h2 { font-size: clamp(4.4rem, 15vw, 15rem); }
.end .get { margin-top: 40px; justify-content: center; }
.free { margin: 18px 0 0; font-size: 17px; font-weight: 700; font-stretch: 100%; }

.foot { padding: 28px 20px 34px; color: var(--dim); font-size: 13px; font-stretch: 100%; font-weight: 500; text-align: center; }
.foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; }
.foot a { color: var(--ink); font-size: 14px; text-decoration: none; font-weight: 600; }
.foot a:hover { text-decoration: underline; }
.foot p { margin: 0; line-height: 1.5; }

/* ---------- Phone width ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 28px 64px; }
  h1 { font-size: clamp(3.9rem, 20.5vw, 9.5rem); }
  .get { margin-top: 28px; }
  .badge img { width: 228px; height: 76px; }
  .live { width: min(80%, 340px); }
  .hero-grid { padding-block: 22px 92px; }
  .crowd { height: 130px; }
  .steps { padding-block: 72px 60px; grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .step:nth-child(n) { margin-top: 0; }
  .step { gap: 22px; justify-items: start; }
  .step h2 { min-height: 0; font-size: clamp(3.4rem, 17vw, 6rem); }
  .step .phone { width: 74%; max-width: 330px; }
  .step:nth-child(2) .phone { justify-self: end; }
  .step:nth-child(2) h2 { justify-self: end; }
  .wall { padding-block: 24px 72px; }
  .wall h2 { margin-bottom: 30px; font-size: clamp(3.8rem, 18vw, 7rem); }
  .end { padding-block: 80px 72px; }
  .end h2 { font-size: clamp(3.2rem, 19vw, 9rem); }
  .end .badge { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .beam, .row { animation: none; }
  .live, .badge, :root { transition: none; }
}