@font-face { font-family: Bricolage; src: url(fonts/Bricolage.ttf) format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: InstrumentSans; src: url(fonts/InstrumentSans.ttf) format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: DMMono; src: url(fonts/DMMono-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --bg: #0d0c0b; --surface: #171513; --high: #221f1b; --line: #2e2a25;
  --text: #f3efe7; --muted: #a8a195; --faint: #6f6a5f; --accent: #cdf03b; --on-accent: #14130a;
  --quiet: #46b8a0; --active: #e9b93b; --busy: #f2782e; --packed: #ea3b52;
  --map: #12100e; --grid: rgba(243, 239, 231, .05);
  --display: Bricolage, "Helvetica Neue", Arial, sans-serif; --body: InstrumentSans, system-ui, sans-serif; --mono: DMMono, ui-monospace, monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f0e8; --surface: #fcfaf5; --high: #ebe6da; --line: #ddd6c6;
    --text: #15130f; --muted: #6a6457; --faint: #9c9584; --accent: #c6ea2e;
    --quiet: #1e9a80; --active: #c79500; --busy: #de5f17; --packed: #d1233d;
    --map: #ece7db; --grid: rgba(21, 19, 15, .06);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.035em; }
h1 { font-size: clamp(46px, 8.6vw, 112px); line-height: .96; font-weight: 800; }
h2 { font-size: clamp(32px, 5vw, 60px); line-height: 1; font-weight: 800; max-width: 16ch; }
p { margin: 0; }
.eyebrow { font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.lead { font-size: clamp(17px, 2vw, 21px); color: var(--muted); max-width: 46ch; margin-top: 22px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--c, var(--accent)); }
.quiet { --c: var(--quiet); } .active { --c: var(--active); } .busy { --c: var(--busy); } .packed { --c: var(--packed); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 26px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 700 16px/1 var(--body); text-decoration: none; border: 1px solid transparent; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { box-shadow: none; border-color: var(--muted); }
.btn.small { padding: 11px 18px; font-size: 14px; }
.btn[aria-disabled="true"] { background: var(--high); color: var(--muted); pointer-events: none; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.cta-row.center { justify-content: center; }

/* Nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 14px clamp(18px, 4vw, 48px); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-color: var(--line); }
.nav nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; color: var(--muted); }
.nav nav a { text-decoration: none; transition: color .2s; }
.nav nav a:hover { color: var(--text); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 24px/1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.mark { width: 30px; height: 26px; color: var(--accent); }

/* Hero */
.hero { min-height: 100svh; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; padding: 120px clamp(18px, 4vw, 48px) 60px; max-width: 1320px; margin: 0 auto; }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.eq i { width: 4px; background: var(--accent); border-radius: 2px; animation: eq 1.1s ease-in-out infinite alternate; }
.eq i:nth-child(1) { height: 40%; animation-delay: -.2s; } .eq i:nth-child(2) { height: 70%; animation-delay: -.5s; } .eq i:nth-child(3) { height: 100%; animation-delay: -.8s; } .eq i:nth-child(4) { height: 55%; animation-delay: -.1s; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.eq i { transform-origin: bottom; }
h1 .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); animation: rise .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
h1 .w:last-child { color: var(--accent); }
@keyframes rise { to { opacity: 1; transform: none; } }
.legend { list-style: none; display: flex; gap: 20px; padding: 0; margin: 44px 0 0; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legend li { display: flex; align-items: center; }

/* Phone frame. The screens inside are the real app layouts, drawn at the app's own 390 px width and scaled down. */
.hero-visual { display: grid; place-items: center; perspective: 1400px; }
.phone { width: min(320px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 46px; padding: 10px; background: linear-gradient(160deg, var(--high), var(--surface)); border: 1px solid var(--line); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
#phone { transform: rotateY(calc(-14deg + var(--p, 0) * 16deg)) rotateX(calc(4deg - var(--p, 0) * 6deg)) translateY(calc(var(--p, 0) * -40px)); transition: transform .12s linear; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--bg); }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
.scene.on { opacity: 1; }
.app { position: absolute; left: 0; top: 0; width: 390px; height: 837px; transform: scale(var(--k, .764)); transform-origin: 0 0; background: var(--bg); color: var(--text); font-family: var(--body); line-height: 1.3; overflow: hidden; }
.app h2, .app h3, .app h4, .app h5, .app p { margin: 0; }
.app .eb { font: 500 10.5px/1.2 var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); }
.app small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.app .dot { width: 7px; height: 7px; margin: 0 6px 0 0; }

/* status bar, bottom navigation */
.sbar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 47px; padding: 17px 34px 0 36px; display: flex; justify-content: space-between; align-items: flex-start; font: 600 15px/1 var(--body); background: linear-gradient(var(--bg) 55%, transparent); }
.sys { display: inline-flex; align-items: center; gap: 6px; }
.sys .sg { width: 17px; height: 11px; background: var(--text); clip-path: polygon(0 100%, 0 72%, 22% 72%, 22% 50%, 48% 50%, 48% 26%, 74% 26%, 74% 0, 100% 0, 100% 100%); }
.sys .bt { width: 24px; height: 12px; border-radius: 4px; border: 1.5px solid color-mix(in srgb, var(--text) 45%, transparent); position: relative; }
.sys .bt::after { content: ""; position: absolute; inset: 2px 5px 2px 2px; border-radius: 2px; background: var(--text); }
.nb { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; padding: 10px 12px 44px; background: var(--bg); border-top: 1px solid var(--line); }
.nb a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 10px/1.2 var(--body); letter-spacing: .6px; color: var(--faint); }
.nb a.on { color: var(--text); font-weight: 600; }
.nb s { display: grid; place-items: center; width: 40px; height: 32px; border-radius: 16px; color: var(--muted); text-decoration: none; transition: all .22s; }
.nb a.on s { width: 56px; background: var(--accent); color: var(--on-accent); }
.nb svg { width: 22px; height: 22px; }

/* shared pieces: crowd chip, avatar */
.cc { display: inline-flex; align-items: center; padding: 5px 11px 5px 9px; border-radius: 99px; font: 700 12px/1 var(--body); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; }
.cc .dot { margin-right: 6px; }
.cc.od { background: rgba(0, 0, 0, .62); color: #fff; }
.av { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #cdf03b, #46b8a0); }
.av.a2 { background: linear-gradient(135deg, #f2782e, #ea3b52); } .av.a3 { background: linear-gradient(135deg, #46b8a0, #3b6fe9); } .av.a4 { background: linear-gradient(135deg, #e9b93b, #f2782e); }
.av u { display: grid; place-items: center; width: 64%; height: 64%; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font: 700 11px/1 var(--body); text-decoration: none; }
.av.big { width: 46px; height: 46px; } .av.big u { font-size: 13px; }

/* the map screen */
.mw { position: absolute; inset: -30px; background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 52px 52px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 52px 52px, radial-gradient(120% 60% at 20% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%), var(--map); }
.scene.on .mw { animation: pan 9s ease-in-out infinite alternate; }
@keyframes pan { from { transform: translate(0, 0); } to { transform: translate(-22px, -16px); } }
.roads i { position: absolute; background: color-mix(in srgb, var(--text) 9%, transparent); border-radius: 6px; }
.roads i:nth-child(1) { left: -10%; top: 30%; width: 130%; height: 11px; transform: rotate(-14deg); }
.roads i:nth-child(2) { left: -10%; top: 62%; width: 130%; height: 8px; transform: rotate(9deg); }
.roads i:nth-child(3) { left: 30%; top: -10%; width: 9px; height: 130%; transform: rotate(12deg); }
.roads i:nth-child(4) { left: 70%; top: -10%; width: 8px; height: 130%; transform: rotate(-8deg); }
.roads i:nth-child(5) { left: 8%; top: 82%; width: 90%; height: 6px; transform: rotate(-4deg); }
.pin { position: absolute; width: var(--s, 44px); aspect-ratio: 1; border-radius: 50%; --r: 10px; --hole: 71%; }
.pin.quiet { --r: 6px; --hole: 80%; } .pin.active { --r: 9px; --hole: 73%; } .pin.busy { --r: 13px; --hole: 65%; } .pin.packed { --r: 17px; --hole: 59%; }
.pin img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--c); background: var(--high); }
.pin::before { content: ""; position: absolute; inset: calc(var(--r) * -1); border-radius: 50%; background: repeating-conic-gradient(var(--c) 0 6deg, transparent 6deg 16deg);
  -webkit-mask: radial-gradient(closest-side, transparent var(--hole), #000 calc(var(--hole) + 1%)); mask: radial-gradient(closest-side, transparent var(--hole), #000 calc(var(--hole) + 1%));
  animation: bars 2.4s ease-in-out infinite alternate; opacity: .9; }
.pin.packed::before { animation-duration: 1.2s; } .pin.quiet::before { animation-duration: 3.4s; opacity: .6; }
@keyframes bars { from { transform: scale(.92) rotate(0deg); } to { transform: scale(1.06) rotate(9deg); } }
.m1 { left: 232px; top: 232px; --s: 44px; } .m2 { left: 86px; top: 322px; --s: 52px; } .m3 { left: 268px; top: 408px; --s: 40px; } .m4 { left: 118px; top: 470px; --s: 44px; } .m5 { left: 56px; top: 196px; --s: 38px; } .m6 { left: 300px; top: 300px; --s: 42px; }
.scene.on .pin.sel { animation: sel 7s ease-in-out infinite; z-index: 3; }
@keyframes sel { 0%, 12% { transform: scale(1); } 22%, 74% { transform: scale(1.22); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4)); } 86%, 100% { transform: scale(1); } }
.me { position: absolute; left: 196px; top: 610px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); animation: me 2s ease-out infinite; }
@keyframes me { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 30px transparent; } }
.search { position: absolute; z-index: 4; top: 59px; left: 16px; right: 16px; height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); font-size: 16px; color: var(--faint); }
.search svg { width: 22px; height: 22px; color: var(--muted); }
.mchips { position: absolute; z-index: 4; top: 123px; left: 16px; right: 0; display: flex; gap: 8px; }
.mchips b { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font: 600 13px/1 var(--body); color: var(--text); white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.mchips .dot { margin-right: 7px; width: 8px; height: 8px; }
.locate { position: absolute; z-index: 4; right: 16px; bottom: 270px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.locate svg { width: 22px; height: 22px; color: var(--text); }
.offme { position: absolute; z-index: 4; right: 14px; top: 392px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 3px solid var(--bg); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); opacity: 0; }
.offme svg { width: 24px; height: 24px; transform: rotate(40deg); }
.offme u { position: absolute; bottom: -10px; padding: 3px 7px; border-radius: 99px; background: var(--text); color: var(--bg); font: 700 10.5px/1 var(--body); text-decoration: none; }
.scene.on .offme { animation: offme 7s ease-in-out infinite; }
@keyframes offme { 0%, 62% { opacity: 0; transform: translateX(16px); } 74%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pcard { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 112px; padding: 14px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .32); transform: translateY(190%); }
.scene.on .pcard { animation: peek 7s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes peek { 0%, 14% { transform: translateY(190%); } 26%, 72% { transform: none; } 84%, 100% { transform: translateY(190%); } }
.prow { display: flex; gap: 14px; }
.prow img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; flex: none; }
.ptxt { flex: 1; min-width: 0; }
.pname { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pname h5 { font: 700 20px/1.15 var(--display); letter-spacing: -.15px; }
.ptxt p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.ptxt small { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text); }
.pbtns { display: flex; gap: 10px; margin-top: 12px; }
.pbtns span { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; font: 700 13.5px/1 var(--body); }
.pbtns .bk { background: var(--text); color: var(--bg); } .pbtns .gy { background: var(--high); color: var(--text); font-weight: 600; font-size: 12.5px; justify-content: flex-start; padding: 0 12px; }
.pbtns svg { width: 18px; height: 18px; flex: none; } .pbtns .gy svg { width: 16px; height: 16px; color: var(--muted); }

/* the Tonight screen: it scrolls by itself, the way a thumb would */
.feed { position: absolute; left: 0; right: 0; top: 0; padding-top: 63px; padding-bottom: 130px; }
.scene.on .feed { animation: scrollfeed 22s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes scrollfeed { 0%, 9% { transform: translateY(0); } 24%, 33% { transform: translateY(-330px); } 48%, 57% { transform: translateY(-640px); } 74%, 86% { transform: translateY(-910px); } 97%, 100% { transform: translateY(0); } }
.hdr { display: flex; align-items: flex-start; gap: 12px; padding: 0 20px; }
.hdr > div { flex: 1; }
.hdr h2 { margin-top: 10px; font: 800 46px/1 var(--display); letter-spacing: -1.2px; }
.rb { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); }
.rb svg { width: 20px; height: 20px; color: var(--text); }
.rb u { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 800 10px/18px var(--body); text-align: center; text-decoration: none; }
.live { display: flex; align-items: center; gap: 8px; margin: 20px 20px 0; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.ld { position: relative; width: 20px; height: 20px; display: grid; place-items: center; margin-left: -4px; } .ld i { width: 8px; height: 8px; border-radius: 50%; background: var(--packed); } .ld::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--packed) 45%, transparent); animation: ldp 1.8s ease-out infinite; }
@keyframes ldp { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.1); opacity: 0; } }
.lv { font: 500 11px/1 var(--mono); letter-spacing: 1.1px; color: var(--packed); margin-right: 6px; }
.ls { font: 600 12.5px/1.2 var(--body); white-space: nowrap; }
.tags { display: flex; gap: 8px; padding: 16px 20px 0; }
.tags b { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); font: 600 12.5px/1.2 var(--body); color: var(--muted); white-space: nowrap; }
.tags b.sel { background: var(--text); color: var(--bg); border-color: var(--text); } .tags svg { width: 16px; height: 16px; }
.sh { padding: 32px 20px 14px; } .sh .eb { margin-bottom: 6px; } .sh h3 { font: 700 20px/1.15 var(--display); letter-spacing: -.15px; }
.hs { overflow: hidden; } .hsi { display: flex; gap: 14px; padding: 0 20px; width: max-content; }
.scene.on .hsi.plans { animation: drift 9s ease-in-out infinite alternate; }
.scene.on .hsi.fys { animation: drift2 11s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateX(-190px); } } @keyframes drift2 { to { transform: translateX(-150px); } }
.plan { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.plan b { display: block; font: 600 14px/1.25 var(--body); } .plan small { font-size: 12.5px; }
.fy { position: relative; flex: none; width: 280px; height: 190px; border-radius: 26px; background-size: cover; background-position: center; }
.fy .cc { position: absolute; top: 12px; right: 12px; }
.fyt { position: absolute; left: 16px; right: 16px; bottom: 16px; color: #fff; } .fyt h5 { font: 700 20px/1.15 var(--display); letter-spacing: -.15px; margin-bottom: 8px; }
.rs { display: inline-block; margin: 0 6px 6px 0; padding: 5px 9px; border-radius: 99px; background: rgba(255, 255, 255, .18); font: 600 11.5px/1.2 var(--body); }
.hot { position: relative; flex: none; width: 250px; height: 300px; border-radius: 28px; background-size: cover; background-position: center; }
.hot .cc { position: absolute; top: 14px; left: 14px; }
.ht { position: absolute; left: 18px; right: 18px; bottom: 18px; color: #fff; } .ht h4 { font: 800 28px/1.05 var(--display); letter-spacing: -.5px; } .ht p { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.vlist { display: grid; gap: 12px; padding: 0 20px; }
.vrow { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.vrow img { width: 68px; height: 68px; border-radius: 16px; object-fit: cover; flex: none; }
.vt { flex: 1; min-width: 0; } .vt h5 { font: 700 18px/1.2 var(--display); letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vt p { margin-top: 3px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vo { display: flex; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.vm { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.vm em { font: 500 10px/1 var(--mono); letter-spacing: 1.1px; font-style: normal; color: var(--c); }
.cm { display: flex; align-items: flex-end; gap: 2.5px; height: 22px; } .cm i { width: 5px; height: calc(22px * var(--h) / 100); border-radius: 3px; background: var(--line); transform-origin: bottom; } .cm i.on { background: var(--c); animation: cm 1.6s ease-in-out infinite alternate; } .cm i:nth-child(2) { animation-delay: .15s; } .cm i:nth-child(3) { animation-delay: .3s; } .cm i:nth-child(4) { animation-delay: .45s; }
@keyframes cm { from { transform: scaleY(.78); } to { transform: scaleY(1); } }

/* the ticket screen */
.abar { position: absolute; z-index: 5; top: 47px; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.bk2 { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); } .bk2 svg { width: 18px; height: 18px; }
.abar h4 { font: 700 18px/1.2 var(--display); letter-spacing: -.1px; }
.tbody { position: absolute; left: 0; right: 0; top: 111px; padding: 0 20px; }
.tcard { padding: 22px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.tcard h3 { font: 700 24px/1.1 var(--display); letter-spacing: -.3px; }
.tsub { margin-top: 6px; font-size: 14px; color: var(--muted); }
.pills { position: relative; height: 26px; margin: 18px auto 22px; }
.pill { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 6px 12px; border-radius: 99px; font: 500 11px/1.2 var(--mono); letter-spacing: 1.1px; white-space: nowrap; }
.pill.ok { color: var(--quiet); background: color-mix(in srgb, var(--quiet) 14%, transparent); }
.pill.used { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); opacity: 0; }
.qrcard { display: inline-block; padding: 14px 18px; border-radius: 28px; background: #f3efe7; box-shadow: 0 12px 34px rgba(0, 0, 0, .22); }
.qrbox { position: relative; width: 264px; height: 264px; margin: 14px 0; }
.qrsvg, .qrsvg svg { width: 100%; height: 100%; display: block; }
.qrlogo { position: absolute; left: 50%; top: 50%; width: 69px; height: 69px; margin: -34.5px 0 0 -34.5px; border-radius: 50%; background: #f3efe7; display: grid; place-items: center; }
.qrlogo svg { width: 57px; height: 57px; padding: 13px; border-radius: 17px; background: #0d0c0b; }
.teq { display: flex; align-items: flex-end; justify-content: space-between; height: 22px; }
.teq i { display: block; width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(#0d0c0b, #55700f); transform-origin: bottom; animation: eqb var(--t, 1s) ease-in-out var(--d, 0s) infinite alternate; }
.teq.bot i { background: linear-gradient(#55700f, #0d0c0b); }
@keyframes eqb { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
.scanl { position: absolute; left: -4px; right: -4px; top: 0; height: 34px; background: linear-gradient(transparent, rgba(205, 240, 59, .55)); border-bottom: 3px solid var(--accent); opacity: 0; }
.hint { position: relative; height: 20px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.hint span { position: absolute; left: 0; right: 0; }
.hint .h2 { opacity: 0; }
.ppl { margin-top: 6px; font: 600 14px/1.3 var(--body); }
.obtn, .gbtn { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 16px; border-radius: 14px; font: 700 13.5px/1 var(--body); }
.obtn { border: 1px solid var(--line); color: var(--text); } .gbtn { margin-top: 10px; background: var(--high); color: var(--text); }
.scene.on .scanl { animation: scanl 9s ease-in-out infinite; }
.scene.on .pill.ok { animation: pillok 9s ease-in-out infinite; }
.scene.on .pill.used { animation: pillused 9s ease-in-out infinite; }
.scene.on .qrcard { animation: qrused 9s ease-in-out infinite; }
.scene.on .hint .h1 { animation: pillok 9s ease-in-out infinite; }
.scene.on .hint .h2 { animation: pillused 9s ease-in-out infinite; }
@keyframes scanl { 0%, 10% { opacity: 0; transform: translateY(-34px); } 14% { opacity: 1; } 46% { opacity: 1; transform: translateY(264px); } 50%, 100% { opacity: 0; transform: translateY(264px); } }
@keyframes pillok { 0%, 50% { opacity: 1; } 54%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes pillused { 0%, 50% { opacity: 0; } 54%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes qrused { 0%, 50% { filter: none; } 56%, 92% { filter: grayscale(1) opacity(.55); } 98%, 100% { filter: none; } }

/* Marquee */
.strip { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; background: var(--surface); }
.track { display: flex; gap: 46px; width: max-content; animation: slide 38s linear infinite; font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.track span { display: inline-flex; align-items: center; white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Blocks */
.block { max-width: 1320px; margin: 0 auto; padding: clamp(80px, 12vw, 160px) clamp(18px, 4vw, 48px) 0; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 52px; }
.card { position: relative; padding: 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .3s, border-color .3s; min-height: 210px; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.card::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); opacity: 0; transition: opacity .4s; }
.card:hover::after { opacity: 1; }
.card .n { font: 500 12px/1 var(--mono); color: var(--accent); letter-spacing: .1em; }
.card h3 { font-size: 26px; margin: 26px 0 10px; line-height: 1.05; }
.card p { color: var(--muted); font-size: 16px; }

/* How it works */
.how { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 50px 0 0; }
.steps li { counter-increment: s; min-height: 46vh; padding-top: 10px; opacity: .3; transition: opacity .5s; }
.steps li.on { opacity: 1; }
.steps li::before { content: "0" counter(s); font: 500 13px/1 var(--mono); color: var(--accent); letter-spacing: .1em; }
.steps h3 { font-size: clamp(28px, 3.4vw, 42px); margin: 14px 0 12px; }
.steps p { color: var(--muted); max-width: 34ch; }
.how-visual { position: sticky; top: 14vh; display: grid; place-items: center; height: 76vh; }
/* Hosts */
.hosts-card { padding: clamp(36px, 6vw, 80px); border-radius: 40px; border: 1px solid var(--line); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface); }
.hosts-card h2 { max-width: 18ch; }

/* FAQ */
.faq #faq-list { margin-top: 44px; max-width: 820px; }
details { border-top: 1px solid var(--line); padding: 4px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 20px 0; font: 700 21px/1.25 var(--display); letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 20px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 28px/1 var(--mono); color: var(--accent); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); padding: 0 0 22px; max-width: 62ch; }

/* Get + footer */
.get { text-align: center; }
.get h2 { margin-inline: auto; max-width: 14ch; }
.get .lead { margin-inline: auto; }
.foot { margin-top: clamp(80px, 12vw, 160px); border-top: 1px solid var(--line); padding: 40px clamp(18px, 4vw, 48px) 60px; display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; color: var(--muted); font-size: 14px; }
.foot .brand { color: var(--text); font-size: 20px; }
.foot p:nth-of-type(1) { flex: 1; min-width: 240px; }
.foot a { color: var(--text); }

@media (max-width: 900px) {
  .nav nav { display: none; } .nav .btn { margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding-top: 110px; }
  .hero-visual { margin-top: 20px; }
  .how { grid-template-columns: 1fr; gap: 0; }
  .how-visual { order: -1; position: sticky; top: 70px; height: 62vh; z-index: 2; background: linear-gradient(var(--bg) 85%, transparent); margin: 30px 0 0; }
  .how-visual .phone { width: min(240px, 60vw); }
  .steps { margin-top: 10px; } .steps li { min-height: 38vh; }
  .legend { flex-wrap: wrap; gap: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  h1 .w, .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Light mode: lime text on cream is unreadable, so lime becomes a highlight instead. */
@media (prefers-color-scheme: light) {
  .mark { color: var(--text); }
  h1 .w:last-child { color: var(--on-accent); background: var(--accent); padding: 0 .14em; border-radius: .18em; margin-left: -.04em; }
  .eq i { background: var(--text); }
  .card .n, .steps li::before, summary::after { color: var(--text); }
  .card .n { background: var(--accent); color: var(--on-accent); padding: 4px 8px; border-radius: 99px; }
}