:root {
  --bg: #11120f;
  --panel: #191b17;
  --line: rgba(255,255,255,.11);
  --text: #f3f4ef;
  --muted: #969d92;
  --pink: #ff2e78;
  --orange: #ff962f;
  --cyan: #32d6e7;
  --display: "Manrope", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); color-scheme: dark; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--display); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
a:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.texture { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .09; background-image: radial-gradient(circle at 17% 22%, rgba(255,255,255,.18) 0 .7px, transparent .8px), radial-gradient(circle at 74% 65%, rgba(255,255,255,.1) 0 .7px, transparent .8px); background-size: 7px 9px, 11px 13px; }

.hero, .final-cta, footer { width: min(100% - 64px, 1360px); margin-inline: auto; }
.brand { width: max-content; display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 25px rgba(255,46,120,.17); }

.eyebrow { margin: 0; color: var(--pink); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
.hero { position: relative; padding: 92px 0 110px; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 800px; height: 650px; left: 48%; top: -160px; background: radial-gradient(circle, rgba(255,46,120,.11), transparent 67%); }
.hero-copy { max-width: 980px; margin-inline: auto; text-align: center; animation: heroIn .9s cubic-bezier(.2,.75,.2,1) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
h1 { margin: 23px 0 26px; font-size: clamp(62px, 8vw, 112px); line-height: .91; letter-spacing: -.078em; }
.hero-copy > h1:first-child { margin-top: 0; }
h1 em { color: #80877d; font-style: normal; font-weight: 500; }
.hero-lede { max-width: 760px; margin: 0 auto 34px; color: #b9beb5; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; letter-spacing: -.025em; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 27px; }
.primary-button { min-width: 240px; height: 65px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 0 21px; border-radius: 6px; background: #f3f4ef; color: #11120f; transition: transform 160ms ease, background 160ms ease; }
.primary-button:hover { transform: translateY(-2px); background: #fff; }
.primary-button > span:first-child { font-size: 23px; }
.primary-button strong, .primary-button small { display: block; text-align: left; }
.primary-button strong { font-size: 13px; }
.primary-button small { margin-top: 2px; color: #62685f; font-family: var(--mono); font-size: 8px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: #c1c6bd; border-bottom: 1px solid #4d534b; padding-bottom: 5px; font-family: var(--mono); font-size: 9px; }
.text-link:hover { color: var(--pink); border-color: var(--pink); }
.github-logo { width: 15px; height: 15px; flex: none; fill: currentColor; }
.hero-screenshot { max-width: 1200px; margin: 74px auto 0; overflow: hidden; border: 0; border-radius: 20px; background: #0c0d0b; box-shadow: 0 45px 120px rgba(0,0,0,.52); animation: heroScreenIn .7s .15s ease-out both; }
.hero-screenshot img { width: calc(100% + 24px); max-width: none; margin: -12px; border: 0; border-radius: 0; }
@keyframes heroScreenIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.feature-timeline { position: relative; height: 450vh; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d0f0c; --timeline-progress: 0%; }
.timeline-sticky { position: sticky; top: 0; height: 100vh; min-height: 680px; display: grid; place-items: center; overflow: hidden; }
.timeline-inner { width: min(100% - 64px, 1360px); display: grid; grid-template-columns: minmax(280px, .58fr) minmax(0, 1.42fr); gap: 6vw; align-items: center; }
.timeline-copy { position: relative; min-height: 560px; display: flex; flex-direction: column; justify-content: center; }
.timeline-count { margin: 30px 0 0; color: #727a70; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.timeline-copy-swap { min-height: 300px; padding-top: 37px; transition: opacity .16s ease, transform .2s ease; }
.timeline-lockup { min-height: 34px; display: flex; align-items: center; gap: 10px; color: #aeb5ab; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.timeline-lockup .rekordbox-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: #fff; }
.timeline-lockup .rekordbox-mark img { width: 20px; height: 20px; }
.timeline-lockup .mini-app-icon { width: 30px; height: 30px; border-radius: 7px; }
.timeline-copy h2 { margin: 21px 0 18px; font-size: clamp(46px, 5vw, 72px); line-height: .98; letter-spacing: -.068em; }
.timeline-copy-swap > p { max-width: 470px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.timeline-progress { position: relative; margin-top: auto; padding-left: 25px; }
.timeline-progress::before, .timeline-progress-fill { content: ""; position: absolute; left: 4px; top: 8px; width: 1px; height: calc(100% - 16px); background: #31352f; }
.timeline-progress-fill { z-index: 1; height: var(--timeline-progress); max-height: calc(100% - 16px); background: var(--pink); box-shadow: 0 0 10px rgba(255,46,120,.6); transition: height .08s linear; }
.timeline-progress ol { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.timeline-progress li { position: relative; color: #555d53; font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; transition: color .35s ease; }
.timeline-progress li i { position: absolute; left: -25px; top: 50%; z-index: 2; width: 9px; height: 9px; border: 1px solid #4a5148; border-radius: 50%; background: #0d0f0c; transform: translateY(-50%); transition: border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.timeline-progress li.active { color: #d8ddd5; }
.timeline-progress li.active i { border-color: var(--pink); background: var(--pink); box-shadow: 0 0 0 5px rgba(255,46,120,.1); }

.timeline-stage { position: relative; width: min(100%, 950px); justify-self: end; aspect-ratio: 1.56; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #151713; box-shadow: 0 45px 120px rgba(0,0,0,.58); }
.timeline-screen { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity .42s ease, transform .42s ease; }
.timeline-screen.active { z-index: 2; opacity: 1; transform: none; }
.timeline-screen > img { width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; }
.ui-screen { padding: 38px; background: radial-gradient(circle at 55% 45%, #292d26 0, #171916 65%); }
.demo-topbar { min-height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.09); color: #838b80; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.demo-topbar strong { color: #eef0eb; font-family: var(--display); font-size: 14px; text-transform: none; letter-spacing: -.02em; }
.demo-topbar > :last-child { justify-self: end; }
.demo-accent { color: var(--orange); }

.recorder-demo { width: min(100%, 690px); overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #262923; box-shadow: 0 26px 70px rgba(0,0,0,.38); }
.recorder-options { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; padding: 18px; }
.recorder-options > div { display: grid; gap: 9px; }
.recorder-options small, .recorder-source small, .recorded-set small, .lyrics-track small { color: #757d72; font-family: var(--mono); font-size: 7px; text-transform: uppercase; letter-spacing: .09em; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.segmented > * { padding: 8px 10px; color: #777f75; font-family: var(--mono); font-size: 8px; font-style: normal; text-align: center; }
.segmented b { background: #f2f3ef; color: #171916; }
.recorder-source, .recorded-set { margin: 0 18px; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; background: #30342c; }
.recorder-source span, .recorded-set span { display: grid; gap: 3px; }
.recorder-source strong, .recorded-set strong { font-size: 11px; }
.recorder-source em { color: #8cce85; font-family: var(--mono); font-size: 8px; font-style: normal; }
.recorder-wave { height: 96px; margin: 10px 18px; opacity: .78; background: linear-gradient(90deg, transparent, rgba(255,150,47,.18), transparent), repeating-linear-gradient(90deg, transparent 0 6px, var(--orange) 6px 8px, transparent 8px 13px); -webkit-mask-image: linear-gradient(0deg, transparent 5%, #000 38% 62%, transparent 95%); mask-image: linear-gradient(0deg, transparent 5%, #000 38% 62%, transparent 95%); }
.record-button { width: calc(100% - 36px); height: 46px; margin: 0 18px 12px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 0; background: #f2f3ef; color: #171916; font: 700 11px var(--display); }
.record-button i { width: 9px; height: 9px; border-radius: 50%; background: #fa3975; }
.recorded-set { margin-bottom: 18px; background: #20231e; }
.recorded-set em { color: #8d9589; font-family: var(--mono); font-size: 8px; font-style: normal; }

.lyrics-demo { width: min(100%, 760px); min-height: 470px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, #18252a, #111714 58%, #261924); box-shadow: 0 26px 70px rgba(0,0,0,.42); }
.live-pill { width: max-content; padding: 5px 8px; background: rgba(255,46,120,.14); color: #ff649b; }
.lyrics-track { display: grid; justify-items: center; gap: 4px; padding: 38px 20px 22px; }
.lyrics-track strong { font-size: 19px; }
.lyrics-track span { color: #858d83; font-size: 10px; }
.lyric-lines { display: grid; justify-items: center; gap: 13px; padding: 18px 25px 26px; }
.lyric-lines p { margin: 0; color: rgba(243,244,239,.22); font-size: clamp(30px, 3.2vw, 49px); font-weight: 700; line-height: 1; letter-spacing: -.055em; }
.lyric-lines .current { color: #fff; text-shadow: 0 0 28px rgba(255,46,120,.3); }
.lyrics-progress { height: 2px; margin: 0 42px; background: rgba(255,255,255,.1); }
.lyrics-progress span { display: block; width: 62%; height: 100%; background: var(--pink); }
.lyrics-time { display: flex; justify-content: space-between; padding: 9px 42px 24px; color: #6f776d; font-family: var(--mono); font-size: 8px; }

.sync-demo { width: min(100%, 780px); min-height: 500px; display: grid; grid-template-columns: 1fr 110px 290px; align-items: center; padding: 28px; }
.sync-source { justify-self: end; display: grid; justify-items: center; gap: 6px; }
.sync-source img { width: 76px; height: 76px; border-radius: 17px; box-shadow: 0 18px 42px rgba(255,46,120,.18); }
.sync-source strong { margin-top: 5px; font-size: 16px; }
.sync-source small, .iphone-head small, .iphone-set small, .iphone-set span, .sync-status small { color: #788076; font-family: var(--mono); font-size: 7px; }
.sync-beam { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--pink); }
.sync-beam span { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--pink)); }
.sync-beam b { font-family: var(--mono); font-size: 18px; font-weight: 400; }
.iphone-frame { position: relative; min-height: 430px; padding: 42px 14px 18px; border: 7px solid #090a09; border-radius: 35px; background: #242720; box-shadow: 0 28px 65px rgba(0,0,0,.5); }
.iphone-island { position: absolute; top: 10px; left: 50%; width: 68px; height: 17px; border-radius: 20px; background: #090a09; transform: translateX(-50%); }
.iphone-head { display: flex; align-items: center; gap: 9px; padding: 0 3px 17px; }
.iphone-head img { width: 31px; height: 31px; border-radius: 8px; }
.iphone-head span { display: grid; gap: 1px; }
.iphone-head strong { font-size: 11px; }
.iphone-set { display: grid; gap: 5px; margin-top: 9px; padding: 14px; border: 1px solid rgba(255,255,255,.07); background: #2d3029; }
.iphone-set strong { font-size: 11px; }
.iphone-set.featured { border-color: rgba(255,46,120,.45); background: linear-gradient(135deg, rgba(255,46,120,.14), #2d3029 65%); }
.iphone-set.featured small { color: #ff6399; text-transform: uppercase; letter-spacing: .07em; }
.sync-status { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.08); background: #20231e; }
.sync-status i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #8cce85; color: #10120f; font-size: 11px; font-style: normal; }
.sync-status span { display: grid; gap: 2px; }
.sync-status strong { font-size: 9px; }
.timeline-screen-label { position: absolute; z-index: 6; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; pointer-events: none; color: rgba(255,255,255,.68); font-family: var(--mono); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 2px 10px #000; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 9px; color: #60685e; font-family: var(--mono); font-size: 7px; text-transform: uppercase; letter-spacing: .1em; transform: translateX(-50%); }
.scroll-cue span { width: 1px; height: 22px; background: linear-gradient(var(--pink), transparent); }

.final-cta { padding: 145px 30px; text-align: center; }
.final-cta > img { width: 102px; margin: 0 auto 30px; border-radius: 23px; box-shadow: 0 28px 75px rgba(255,46,120,.22); }
.final-cta h2 { margin: 27px 0 22px; font-size: clamp(48px, 5.5vw, 78px); line-height: .98; letter-spacing: -.068em; }
.final-cta > p:not(.eyebrow) { color: var(--muted); }
.final-cta .hero-actions { margin-top: 32px; }
.build-note { display: block; margin-top: 19px; color: #666e64; font-family: var(--mono); font-size: 8px; }

footer { min-height: 145px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 35px; border-top: 1px solid var(--line); color: #737b70; font-family: var(--mono); font-size: 8px; }
footer .brand { color: #cdd1ca; font-family: var(--display); font-size: 13px; }
footer .brand img { width: 28px; height: 28px; }
footer p { margin: 0; }
footer a:hover { color: var(--pink); }
footer .legal { grid-column: 1 / -1; max-width: 850px; padding-bottom: 25px; line-height: 1.5; }

@media (max-width: 980px) {
  .feature-timeline { height: 430vh; }
  .timeline-inner { grid-template-columns: 1fr; gap: 24px; }
  .timeline-copy { min-height: 0; display: grid; grid-template-columns: 1fr 170px; gap: 15px 25px; align-items: end; }
  .timeline-copy > .eyebrow, .timeline-count { grid-column: 1; }
  .timeline-count { margin-top: 0; justify-self: end; grid-column: 2; grid-row: 1; }
  .timeline-copy-swap { min-height: 170px; padding-top: 12px; }
  .timeline-copy h2 { font-size: 46px; }
  .timeline-progress { grid-column: 2; grid-row: 2; margin: 0; align-self: center; }
  .timeline-stage { width: min(100%, 900px); justify-self: center; }
  .sync-demo { transform: scale(.9); }
}

@media (max-width: 680px) {
  .hero, .final-cta, footer { width: min(100% - 32px, 1360px); }
  .hero { padding: 70px 0 85px; }
  h1 { font-size: clamp(56px, 17vw, 78px); }
  .hero-actions { flex-direction: column; }
  .primary-button { width: 100%; }
  .hero-screenshot { width: calc(100% + 16px); margin-left: -8px; }
  .feature-timeline { height: 420vh; }
  .timeline-sticky { min-height: 620px; }
  .timeline-inner { width: min(100% - 28px, 1360px); }
  .timeline-copy { grid-template-columns: 1fr; gap: 5px; }
  .timeline-copy > .eyebrow { grid-column: 1; }
  .timeline-count { grid-column: 1; grid-row: auto; justify-self: start; margin: 8px 0 0; }
  .timeline-copy-swap { min-height: 185px; }
  .timeline-lockup { min-height: 26px; }
  .timeline-lockup .rekordbox-mark, .timeline-lockup .mini-app-icon { width: 25px; height: 25px; }
  .timeline-copy h2 { margin-top: 14px; font-size: 39px; }
  .timeline-copy-swap > p { font-size: 11px; }
  .timeline-progress { display: none; }
  .timeline-stage { height: 360px; aspect-ratio: auto; }
  .ui-screen { padding: 14px; }
  .recorder-options { grid-template-columns: 1fr; }
  .recorder-wave { height: 48px; }
  .recorded-set { display: none; }
  .lyrics-demo { min-height: 0; }
  .lyrics-track { padding-top: 24px; }
  .sync-demo { min-height: 0; grid-template-columns: 1fr 50px 180px; padding: 8px; transform: none; }
  .sync-source img { width: 48px; height: 48px; border-radius: 11px; }
  .iphone-frame { min-height: 300px; padding-top: 37px; border-width: 5px; border-radius: 27px; }
  .iphone-set { padding: 9px; }
  .scroll-cue { bottom: 12px; }
  .final-cta { padding-inline: 0; }
  footer { grid-template-columns: 1fr 1fr; padding: 28px 0; }
  footer .brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}