@font-face {
  font-family: Poppins;
  src: url("./assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("./assets/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("./assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #030306;
  --surface: #0d0d13;
  --surface-2: #15151d;
  --line: rgba(255, 255, 255, .11);
  --text: #ffffff;
  --muted: #b9b4ca;
  --soft: #756f86;
  --purple: #6b52e4;
  --purple-2: #9886ed;
  --purple-3: #5334b7;
  --green: #2aff9a;
  --cyan: #78e8ff;
  --warm: #ff8f4f;
  --radius: 8px;
  --page: 1180px;
  --shadow: 0 28px 80px rgba(0, 0, 0, .34);
  color-scheme: dark;
  font-family: Poppins, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #050507;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(circle at 50% 0%, rgba(107, 82, 228, .12), transparent 34rem);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
}

.site-shell {
  min-height: 100vh;
  position: relative;
}

.section-pad {
  width: min(var(--page), calc(100vw - 40px));
  margin: 0 auto;
  padding: 110px 0;
}

.topbar {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(var(--page) - 84px), calc(100vw - 96px));
  height: 66px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 14px 0 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(9, 9, 15, .70);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.brand img {
  width: 38px;
  height: 38px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.nav-links a,
.nav-cta,
.btn {
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.nav-links a {
  padding: 12px 14px;
  border-radius: 8px;
}

.nav-links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .06);
}

.nav-cta {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--text);
  color: #090910;
  font-weight: 800;
  font-size: 13px;
}

.nav-cta:hover,
.btn:hover {
  transform: translateY(-2px);
}

.hero {
  min-height: 100vh;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.hero-card {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 154px 48px 74px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(107, 82, 228, .34), transparent 34rem),
    linear-gradient(180deg, #11111b 0%, #08080d 48%, #050507 100%);
  box-shadow: none;
}

.hero-copy,
.hero-stage,
.feature-visual,
.identity-panel,
.paid-image,
.premium-card,
.premium-stack {
  min-width: 0;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
  margin: 0 auto;
  text-align: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.hero-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .12), transparent 36%),
    linear-gradient(180deg, rgba(107, 82, 228, .38), rgba(107, 82, 228, .12) 58%, rgba(107, 82, 228, .02));
  border: 1px solid rgba(107, 82, 228, .20);
}

.orbit-ring-one {
  width: min(760px, 88vw);
  height: min(760px, 88vw);
  top: 58px;
  opacity: .72;
}

.orbit-ring-two {
  width: min(560px, 68vw);
  height: min(560px, 68vw);
  top: 142px;
  opacity: .82;
}

.orbit-ring-three {
  width: min(360px, 48vw);
  height: min(360px, 48vw);
  top: 252px;
  opacity: .92;
}

.hero-glow {
  position: absolute;
  top: 118px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(107, 82, 228, .38);
  filter: blur(88px);
}

.orbit-badge {
  position: absolute;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(107, 82, 228, .42);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 44px rgba(107, 82, 228, .46);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.badge-left {
  top: 270px;
  left: calc(50% - 270px);
}

.badge-top {
  top: 150px;
  left: calc(50% - 27px);
}

.badge-right {
  top: 268px;
  right: calc(50% - 286px);
  width: 60px;
  height: 60px;
  font-size: 13px;
}

.hero-kicker {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 24px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--purple-2);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: clamp(48px, 5.5vw, 68px);
  line-height: .95;
  max-width: 760px;
  overflow-wrap: break-word;
}

h2 {
  margin: 0;
  font-size: 54px;
  line-height: 1;
}

h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
}

.hero-lead,
.section-intro p,
.split-copy p,
.paid-copy p,
.final-cta p {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 600;
}

.hero-lead {
  margin: 28px auto 0;
  max-width: 720px;
  color: rgba(255, 255, 255, .70);
}

.hero-note {
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .48);
  font-size: 12px;
  font-weight: 600;
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  font-weight: 800;
  font-size: 14px;
}

.btn-primary {
  color: var(--text);
  border-color: rgba(255, 255, 255, .20);
  background: var(--purple);
  box-shadow: 0 14px 34px rgba(107, 82, 228, .20);
}

.btn-secondary {
  color: var(--text);
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
}

.hero .hero-actions .btn-primary,
.hero .hero-actions .btn-secondary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  border-color: rgba(255, 255, 255, .105);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .025) 52%, rgba(107, 82, 228, .08)),
    rgba(14, 12, 24, .22);
  -webkit-backdrop-filter: blur(13px) saturate(175%) contrast(108%);
  backdrop-filter: blur(13px) saturate(175%) contrast(108%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(107, 82, 228, .14),
    0 10px 28px rgba(0, 0, 0, .20),
    0 2px 10px rgba(107, 82, 228, .08);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.hero .hero-actions .btn-primary::before,
.hero .hero-actions .btn-secondary::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -10%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .22), transparent 28%),
    radial-gradient(circle at 76% 88%, rgba(107, 82, 228, .22), transparent 34%);
  -webkit-backdrop-filter: blur(3px) saturate(195%) contrast(112%);
  backdrop-filter: blur(3px) saturate(195%) contrast(112%);
  -webkit-mask-image: linear-gradient(105deg, transparent 2%, #000 28%, rgba(0, 0, 0, .72) 58%, #000 82%, transparent 98%);
  mask-image: linear-gradient(105deg, transparent 2%, #000 28%, rgba(0, 0, 0, .72) 58%, #000 82%, transparent 98%);
  transform: scale(1.08) skewX(-3deg);
  opacity: .64;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease;
}

.hero .hero-actions .btn-primary::after,
.hero .hero-actions .btn-secondary::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1px 10% auto;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent);
  filter: blur(3px);
  opacity: .72;
  pointer-events: none;
}

.hero .hero-actions .btn-primary:hover,
.hero .hero-actions .btn-secondary:hover {
  border-color: rgba(255, 255, 255, .20);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 52%, rgba(107, 82, 228, .10)),
    rgba(14, 12, 24, .25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(107, 82, 228, .18),
    0 13px 32px rgba(0, 0, 0, .24),
    0 4px 16px rgba(107, 82, 228, .12);
  transform: translateY(-1px);
}

.hero .hero-actions .btn-primary:hover::before,
.hero .hero-actions .btn-secondary:hover::before {
  opacity: .82;
  transform: scale(1.14) skewX(3deg) translateX(2%);
}

.hero .hero-actions .btn-primary:active,
.hero .hero-actions .btn-secondary:active {
  transform: scale(.975);
  transition-duration: 90ms;
}

.btn-light {
  color: #111119;
  background: var(--text);
}

.text-link {
  color: var(--muted);
  font-weight: 800;
  padding: 12px 8px;
}

.text-link:hover {
  color: var(--text);
}

.hero-stage {
  min-height: 680px;
  position: relative;
  display: grid;
  place-items: center;
}

.glass-panel {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(18, 18, 27, .62);
  backdrop-filter: blur(24px) saturate(150%);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.signal-card,
.floating-note,
.floating-chat {
  position: absolute;
  z-index: 3;
}

.signal-card {
  top: 98px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.signal-dot {
  width: 10px;
  height: 10px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(42, 255, 154, .8);
}

.floating-note {
  right: 8px;
  top: 158px;
  width: 190px;
  padding: 18px;
}

.floating-note span,
.floating-chat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.floating-note strong,
.floating-chat strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.1;
}

.floating-chat {
  left: 10px;
  bottom: 118px;
  width: 250px;
  padding: 18px;
}

.phone {
  width: 288px;
  height: 590px;
  border: 3px solid rgba(255, 255, 255, .14);
  border-radius: 42px;
  padding: 14px;
  background: linear-gradient(145deg, #050508, #161421);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .56), 0 0 0 1px rgba(107, 82, 228, .24);
  position: relative;
}

.phone-main {
  transform: rotate(-4deg);
}

.phone-island {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 28px;
  background: #000;
  border-radius: 999px;
  z-index: 4;
}

.app-screen {
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(107, 82, 228, .2), transparent 22%),
    #08080d;
  padding: 58px 16px 16px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.app-header span {
  font-size: 12px;
  color: var(--muted);
}

.app-header strong {
  font-size: 12px;
  color: var(--purple-2);
}

.group-hero {
  min-height: 112px;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(107, 82, 228, .86), rgba(152, 134, 237, .42)),
    linear-gradient(45deg, #27194f, #15151d);
  border: 1px solid rgba(255, 255, 255, .12);
}

.avatar-stack {
  display: flex;
}

.avatar-stack span,
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
  background: linear-gradient(135deg, var(--warm), var(--purple-2));
  border: 2px solid #0a0a10;
}

.avatar-stack span + span {
  margin-left: -12px;
}

.group-hero strong,
.post-meta strong {
  display: block;
  font-size: 13px;
}

.group-hero small,
.post-meta small {
  color: rgba(255, 255, 255, .66);
  font-size: 10px;
  display: block;
  margin-top: 2px;
}

.post-card {
  margin-top: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 14px;
}

.post-card p {
  margin: 12px 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar.purple {
  background: linear-gradient(135deg, var(--purple), var(--cyan));
}

.waveform {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.waveform span {
  width: 8px;
  height: 16px;
  border-radius: 99px;
  background: var(--purple-2);
}

.waveform span:nth-child(2),
.waveform span:nth-child(5) {
  height: 26px;
}

.waveform span:nth-child(3) {
  height: 32px;
}

.compact {
  padding: 12px;
}

.bottom-nav {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 190px;
  height: 42px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .48);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.bottom-nav span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.bottom-nav .active {
  background: var(--purple);
  box-shadow: 0 0 24px rgba(107, 82, 228, .9);
}

.proof-strip {
  width: min(var(--page), calc(100vw - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.proof-item {
  padding: 20px;
  border-radius: 8px;
  background: rgba(12, 12, 18, .7);
}

.proof-item strong {
  display: block;
  font-size: 34px;
  line-height: 1;
}

.proof-item span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.section-intro {
  max-width: 820px;
  margin-bottom: 42px;
}

.section-intro p {
  margin: 20px 0 0;
}

.problem-grid,
.artist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.problem-card,
.artist-card {
  min-height: 250px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 18, 27, .72);
}

.problem-card span {
  color: var(--purple-2);
  font-size: 13px;
  font-weight: 800;
}

.problem-card h3,
.artist-card h3 {
  margin-top: 54px;
}

.problem-card p,
.artist-card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  margin: 16px 0 0;
}

.feature-showcase {
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  gap: 28px;
  align-items: center;
}

.feature-list {
  display: grid;
  gap: 12px;
}

.feature-tab {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  padding: 22px;
  cursor: pointer;
}

.feature-tab span {
  display: block;
  color: var(--purple-2);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.feature-tab strong {
  display: block;
  font-size: 21px;
  line-height: 1.2;
}

.feature-tab.active {
  background: linear-gradient(135deg, rgba(107, 82, 228, .9), rgba(152, 134, 237, .28));
  border-color: rgba(255, 255, 255, .22);
}

.feature-tab.active span {
  color: #fff;
}

.feature-visual {
  min-height: 680px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(107, 82, 228, .16), rgba(120, 232, 255, .05)),
    rgba(255, 255, 255, .035);
}

.phone-feature {
  transform: rotate(3deg);
}

.visual-screen {
  transition: opacity 220ms ease;
}

.mini-bubbles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mini-bubbles span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
}

.screen-title {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.08;
}

.screen-copy {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 0 0 16px;
}

.screen-list {
  display: grid;
  gap: 10px;
}

.screen-row {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.split-section,
.paid-groups,
.premium {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 38px;
  align-items: center;
}

.split-copy p,
.paid-copy p {
  margin: 24px 0 0;
}

.identity-panel {
  min-height: 470px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(107, 82, 228, .18), rgba(42, 255, 154, .08)),
    rgba(255, 255, 255, .04);
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 16px;
}

.dna-card {
  border-radius: 8px;
  padding: 34px;
  background: #06060b;
  border: 1px solid rgba(255, 255, 255, .12);
}

.dna-card span {
  color: var(--green);
  font-weight: 800;
  font-size: 13px;
}

.dna-card h3 {
  font-size: 38px;
  line-height: 1.08;
  margin: 26px 0;
}

.dna-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge-row span {
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
}

.artist-cta {
  margin-top: 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(107, 82, 228, .22), rgba(255, 255, 255, .045));
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.artist-cta p {
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 680px;
  line-height: 1.45;
}

.paid-image {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--shadow);
}

.paid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.check-list li {
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
}

.check-list li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--green);
}

.premium {
  align-items: stretch;
}

.premium-card {
  border-radius: 8px;
  padding: 44px;
  background: linear-gradient(135deg, rgba(107, 82, 228, .94), rgba(83, 52, 183, .74));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: var(--shadow);
}

.premium-card p {
  color: rgba(255, 255, 255, .78);
  font-size: 19px;
  line-height: 1.45;
  margin: 22px 0 0;
}

.price-row {
  margin: 34px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.price-row strong {
  font-size: 58px;
  line-height: 1;
}

.price-row span {
  color: rgba(255, 255, 255, .7);
  font-weight: 700;
}

.premium-stack {
  display: grid;
  gap: 14px;
}

.premium-mini {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .055);
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.premium-mini strong {
  font-size: 42px;
  line-height: 1;
  color: var(--purple-2);
}

.premium-mini span {
  color: var(--muted);
  font-size: 20px;
  font-weight: 800;
}

.movement {
  position: relative;
  overflow: hidden;
}

.movement-marquee {
  display: flex;
  gap: 18px;
  white-space: nowrap;
  color: rgba(255, 255, 255, .06);
  font-size: 82px;
  line-height: 1;
  font-weight: 800;
  transform: translateX(var(--marquee, -4%));
  margin-bottom: 38px;
}

.movement-marquee span {
  flex: 0 0 auto;
}

.final-cta {
  min-height: 560px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(107, 82, 228, .22), rgba(120, 232, 255, .06)),
    rgba(255, 255, 255, .045);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 56px;
}

.final-cta img {
  width: 92px;
  margin-bottom: 26px;
}

.final-cta h2 {
  max-width: 820px;
}

.final-cta p:not(.eyebrow) {
  max-width: 680px;
  margin: 22px auto 0;
}

.footer {
  width: min(var(--page), calc(100vw - 40px));
  margin: 0 auto;
  padding: 34px 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.footer .brand {
  color: var(--text);
}

.footer .brand img {
  width: 34px;
  height: 34px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 16px;
  font-weight: 700;
}

.footer-links a:hover {
  color: var(--text);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.waitlist {
  padding-top: 92px;
}

.waitlist-panel {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(107, 82, 228, .34), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)),
    #07060c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 42px 110px rgba(0, 0, 0, .34);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 72px 42px;
}

.waitlist-panel > *:not(.waitlist-glow) {
  position: relative;
  z-index: 2;
}

.waitlist-glow {
  position: absolute;
  inset: auto 8% -34%;
  height: 72%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(107, 82, 228, .36), transparent 67%);
  filter: blur(34px);
  opacity: .88;
  transform: translate3d(var(--field-x, 0), var(--field-y, 0), 0);
  pointer-events: none;
}

.waitlist-panel h2 {
  max-width: 760px;
  margin: 12px auto 0;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: .98;
}

.waitlist-panel > p:not(.eyebrow) {
  max-width: 680px;
  margin: 24px auto 0;
  color: rgba(255, 255, 255, .68);
  font-size: 19px;
  line-height: 1.48;
  font-weight: 500;
}

.waitlist-form {
  width: min(720px, 100%);
  margin: 38px auto 0;
}

.waitlist-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

.waitlist-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 0 10px 0 22px;
}

.waitlist-field input::placeholder {
  color: rgba(255, 255, 255, .42);
}

.waitlist-submit {
  min-width: 168px;
  cursor: pointer;
}

.waitlist-submit:disabled {
  cursor: wait;
  opacity: .72;
  transform: none;
}

.waitlist-status {
  min-height: 22px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
  font-weight: 700;
}

.waitlist-status.is-success {
  color: #78e8ff;
}

.waitlist-status.is-error {
  color: #ff8dba;
}

.waitlist-consent {
  max-width: 620px;
  margin: 12px auto 0;
  color: rgba(255, 255, 255, .42);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 500;
}

.waitlist-consent a {
  color: rgba(255, 255, 255, .76);
  font-weight: 700;
}

.waitlist-consent a:hover {
  color: var(--text);
}

.reveal,
.js-reveal .reveal,
.js-reveal .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1020px) {
  .section-pad {
    padding: 84px 0;
  }

  .nav-links {
    display: none;
  }

  .hero,
  .feature-showcase,
  .split-section,
  .paid-groups,
  .premium {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 56px;
  }

  h2 {
    font-size: 42px;
  }

  .hero {
    padding-top: 0;
  }

  .hero-card {
    min-height: 100vh;
    padding: 124px 34px 82px;
  }

  .orbit-ring-one {
    width: 720px;
    height: 720px;
  }

  .orbit-ring-two {
    width: 540px;
    height: 540px;
  }

  .orbit-ring-three {
    width: 360px;
    height: 360px;
  }

  .badge-left {
    left: calc(50% - 238px);
  }

  .badge-right {
    right: calc(50% - 250px);
  }

  .problem-grid,
  .artist-grid,
  .proof-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-visual {
    min-height: 620px;
  }
}

@media (max-width: 700px) {
  .section-pad,
  .proof-strip,
  .footer {
    width: calc(100vw - 56px);
    max-width: var(--page);
  }

  .topbar {
    width: calc(100vw - 56px);
    max-width: var(--page);
  }

  .topbar {
    top: 44px;
    height: 56px;
    padding: 0 10px 0 12px;
    border-radius: 16px;
  }

  .nav-cta {
    display: none;
  }

  h1 {
    font-size: clamp(38px, 10.5vw, 46px);
    line-height: .98;
    max-width: 100%;
  }

  .hero-copy {
    max-width: 100%;
  }

  h2 {
    font-size: 34px;
  }

  .hero-lead,
  .section-intro p,
  .split-copy p,
  .paid-copy p,
  .final-cta p {
    font-size: 16px;
  }

  .hero-actions {
    align-items: stretch;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .hero-actions .text-link {
    width: 100%;
    padding-left: 0;
  }

  .hero-stage {
    min-height: 560px;
  }

  .hero {
    padding-top: 0;
  }

  .hero-card {
    min-height: 100vh;
    padding: 126px 22px 48px;
    border-radius: 0;
  }

  .hero-kicker {
    margin-bottom: 18px;
    font-size: 11px;
  }

  .hero-lead {
    margin-top: 22px;
  }

  .hero-note {
    margin-top: 12px;
    font-size: 11px;
  }

  .orbit-ring-one {
    width: 560px;
    height: 560px;
    top: 80px;
  }

  .orbit-ring-two {
    width: 420px;
    height: 420px;
    top: 154px;
  }

  .orbit-ring-three {
    width: 290px;
    height: 290px;
    top: 230px;
  }

  .hero-glow {
    top: 120px;
    width: 280px;
    height: 280px;
    filter: blur(70px);
  }

  .orbit-badge {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }

  .badge-left {
    top: 246px;
    left: calc(50% - 166px);
  }

  .badge-top {
    top: 142px;
    left: calc(50% - 21px);
  }

  .badge-right {
    top: 248px;
    right: calc(50% - 176px);
    width: 48px;
    height: 48px;
    font-size: 11px;
  }

  .phone {
    width: 238px;
    height: 500px;
  }

  .floating-chat,
  .floating-note,
  .signal-card {
    display: none;
  }

  .problem-grid,
  .artist-grid,
  .proof-strip,
  .check-list {
    grid-template-columns: 1fr;
  }

  .problem-card,
  .artist-card {
    min-height: auto;
  }

  .problem-card h3,
  .artist-card h3 {
    margin-top: 34px;
  }

  .artist-cta,
  .footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .premium-card,
  .final-cta,
  .waitlist-panel {
    padding: 28px;
  }

  .waitlist {
    padding-top: 72px;
  }

  .waitlist-panel {
    min-height: 540px;
  }

  .waitlist-panel > p:not(.eyebrow) {
    font-size: 16px;
  }

  .waitlist-field {
    grid-template-columns: 1fr;
    border-radius: 28px;
    padding: 10px;
  }

  .waitlist-field input {
    min-height: 50px;
    padding: 0 10px;
    text-align: center;
  }

  .waitlist-submit {
    width: 100%;
  }

  .price-row strong {
    font-size: 42px;
  }

  .movement-marquee {
    font-size: 48px;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .glass-panel,
  .hero .hero-actions .btn-primary,
  .hero .hero-actions .btn-secondary {
    backdrop-filter: none;
    background: rgba(10, 10, 16, .96);
  }
}

/* 2026 immersive redesign */
:root {
  --bg: #020205;
  --surface: #0a0910;
  --surface-2: #111019;
  --line: rgba(255, 255, 255, .09);
  --text: #f8f7ff;
  --muted: #aaa5ba;
  --soft: #6f697d;
  --purple: #6b52e4;
  --purple-2: #a394ff;
  --purple-3: #49309e;
  --page: 1200px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --shadow-deep: 0 42px 120px rgba(0, 0, 0, .58);
}

body {
  background: var(--bg);
}

body::before {
  z-index: -3;
  background:
    radial-gradient(ellipse 70% 34% at 50% -8%, rgba(107, 82, 228, .18), transparent 72%),
    linear-gradient(180deg, #05040a 0%, #020205 48%, #05040a 100%);
}

.cursor-light {
  position: fixed;
  z-index: 0;
  width: 520px;
  height: 520px;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(107, 82, 228, .075), transparent 68%);
  transform: translate3d(calc(var(--cursor-x, 50vw) - 50%), calc(var(--cursor-y, 30vh) - 50%), 0);
  transition: opacity 300ms ease;
  will-change: transform;
}

body.has-pointer .cursor-light {
  opacity: 1;
}

.site-shell,
main,
.footer {
  position: relative;
  z-index: 1;
}

.section-pad {
  width: min(var(--page), calc(100vw - 64px));
  padding: 138px 0;
}

.section-band {
  position: relative;
}

.section-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100vw - 48px, 1440px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10) 28%, rgba(107, 82, 228, .32) 50%, rgba(255, 255, 255, .10) 72%, transparent);
}

.topbar {
  top: 20px;
  width: min(920px, calc(100vw - 40px));
  height: 64px;
  padding: 0 9px 0 14px;
  border-color: rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: rgba(8, 7, 13, .68);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: width 320ms var(--ease-out), background 220ms ease, border-color 220ms ease;
}

.topbar.is-scrolled {
  width: min(820px, calc(100vw - 40px));
  background: rgba(8, 7, 13, .86);
  border-color: rgba(255, 255, 255, .14);
}

.topbar .brand img {
  width: 36px;
  height: 36px;
}

.nav-links {
  gap: 2px;
}

.nav-links a {
  position: relative;
  padding: 10px 13px;
  color: rgba(255, 255, 255, .52);
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--purple-2);
  box-shadow: 0 0 10px rgba(163, 148, 255, .9);
  transform: translateX(-50%);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-cta {
  height: 46px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .94);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .22);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: transform 220ms var(--ease-out);
}

.menu-toggle span:first-child { transform: translateY(-3px); }
.menu-toggle span:last-child { transform: translateY(3px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.scroll-progress {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-2), var(--purple));
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
}

.mobile-menu {
  position: fixed;
  z-index: 49;
  top: 92px;
  left: 20px;
  right: 20px;
  display: none;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 7, 13, .96);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-deep);
  transform-origin: top right;
}

.mobile-menu a:not(.btn) {
  padding: 14px 12px;
  color: var(--muted);
  font-weight: 700;
}

.hero {
  min-height: 1020px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62% 34% at 50% 57%, rgba(107, 82, 228, .18), transparent 72%),
    linear-gradient(180deg, #06050b 0%, #030207 62%, #020205 100%);
}

.hero-card {
  min-height: 1020px;
  display: block;
  padding: 154px 32px 0;
  overflow: hidden;
  background: none;
}

.hero-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-line {
  position: absolute;
  left: 50%;
  top: 52%;
  border: 1px solid rgba(107, 82, 228, .11);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.line-one { width: 1020px; height: 520px; }
.line-two { width: 790px; height: 390px; border-color: rgba(163, 148, 255, .11); }
.line-three { width: 540px; height: 260px; border-color: rgba(255, 255, 255, .08); }

.ambient-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 12px rgba(163, 148, 255, .8);
  animation: particle-drift 7s var(--ease-in-out) infinite alternate;
}

.particle-one { left: 12%; top: 29%; }
.particle-two { right: 15%; top: 22%; animation-delay: -2s; }
.particle-three { left: 21%; top: 54%; animation-delay: -4s; }
.particle-four { right: 24%; top: 48%; animation-delay: -6s; }

@keyframes particle-drift {
  from { transform: translate3d(0, -5px, 0); opacity: .35; }
  to { transform: translate3d(10px, 8px, 0); opacity: 1; }
}

.hero-copy {
  width: min(1040px, 100%);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin-bottom: 22px;
  padding: 8px 12px;
  border: 1px solid #6453cc;
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .64);
  font-size: 11px;
  letter-spacing: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hero-kicker span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-2);
  box-shadow: 0 0 14px rgba(163, 148, 255, .9);
}

.hero h1 {
  max-width: 1000px;
  margin-inline: auto;
  font-size: clamp(68px, 7.8vw, 108px);
  line-height: .88;
  font-weight: 800;
  text-wrap: balance;
  text-shadow: 0 2px 32px rgba(107, 82, 228, .15);
}

.hero-lead {
  max-width: 760px;
  margin-top: 30px;
  color: rgba(239, 236, 249, .68);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
}

.hero-actions {
  margin-top: 30px;
}

.hero-note {
  margin-top: 13px;
}

.hero-signal {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: rgba(10, 8, 17, .54);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0);
  transition: border-color 180ms ease;
}

.hero-signal:hover { border-color: rgba(163, 148, 255, .38); }
.signal-left { left: 5%; top: 620px; }
.signal-right { right: 6%; top: 570px; }

.signal-icon,
.signal-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 24px rgba(107, 82, 228, .45);
  font-weight: 800;
}

.hero-signal small,
.hero-signal strong { display: block; }
.hero-signal small { color: var(--soft); font-size: 9px; }
.hero-signal strong { margin-top: 2px; font-size: 12px; }
.hero-signal i { width: 3px; border-radius: 99px; background: var(--purple-2); }
.hero-signal i:nth-of-type(1) { height: 8px; margin-left: auto; }
.hero-signal i:nth-of-type(2) { height: 17px; }
.hero-signal i:nth-of-type(3) { height: 12px; }
.hero-signal i:nth-of-type(4) { height: 22px; }

.signal-left i {
  transform-origin: center;
  animation: signal-wave 1.8s ease-in-out infinite alternate;
}

.signal-left i:nth-of-type(2) { animation-delay: -.45s; }
.signal-left i:nth-of-type(3) { animation-delay: -.9s; }
.signal-left i:nth-of-type(4) { animation-delay: -1.35s; }

@keyframes signal-wave {
  from { transform: scaleY(.72); opacity: .62; }
  to { transform: scaleY(1); opacity: 1; }
}

.sound-horizon {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 590px;
  width: 760px;
  height: 260px;
  transform: translateX(-50%);
  pointer-events: none;
}

.sound-horizon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 940px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(107, 82, 228, .68), #d8d0ff 50%, rgba(107, 82, 228, .68), transparent);
  box-shadow: 0 0 16px #8f78ff, 0 0 52px rgba(107, 82, 228, .85), 0 -34px 90px rgba(107, 82, 228, .42);
}

.sound-horizon span {
  position: absolute;
  left: 50%;
  bottom: 0;
  border: 2px solid rgba(177, 162, 255, .55);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
  box-shadow: 0 0 16px rgba(107, 82, 228, .42), inset 0 10px 26px rgba(107, 82, 228, .08);
}

.sound-horizon span:nth-child(1) { width: 190px; height: 110px; opacity: .95; }
.sound-horizon span:nth-child(2) { width: 280px; height: 150px; opacity: .65; }
.sound-horizon span:nth-child(3) { width: 390px; height: 205px; opacity: .38; }
.sound-horizon span:nth-child(4) { width: 540px; height: 260px; opacity: .18; }

.hero-product {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -18px;
  width: min(1040px, calc(100vw - 80px));
  height: 420px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 8px 8px 0 0;
  background: rgba(7, 6, 12, .88);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .05), 0 45px 140px rgba(0, 0, 0, .7), 0 -24px 100px rgba(107, 82, 228, .14);
  transform: translateX(-50%) perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(var(--depth-x, 0), var(--depth-y, 0), 0);
  transform-origin: 50% 100%;
  transition: border-color 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.hero-product:hover {
  border-color: rgba(163, 148, 255, .28);
  box-shadow: 0 45px 140px rgba(0, 0, 0, .72), 0 -24px 110px rgba(107, 82, 228, .20);
}

.product-chrome {
  height: 54px;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 360px) 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
}

.product-brand,
.product-user,
.note-user,
.member-stack { display: flex; align-items: center; }
.product-brand { gap: 8px; font-weight: 800; font-size: 12px; }
.product-brand img { width: 26px; height: 26px; }
.product-search { padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 6px; background: rgba(255, 255, 255, .035); color: var(--soft); font-size: 10px; }
.product-user { justify-content: flex-end; gap: 5px; }
.product-user span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .18); }

.product-shell {
  height: calc(100% - 54px);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 260px;
}

.product-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: 28px;
  border-right: 1px solid rgba(255, 255, 255, .06);
}

.product-sidebar span { width: 17px; height: 17px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .11); }
.product-sidebar span.active { background: var(--purple); border-color: transparent; box-shadow: 0 0 20px rgba(107, 82, 228, .52); }

.product-feed { padding: 24px; overflow: hidden; }
.feed-heading { display: flex; align-items: center; justify-content: space-between; }
.feed-heading small { display: block; margin-bottom: 3px; color: var(--purple-2); font-size: 9px; font-weight: 800; }
.feed-heading strong { font-size: 21px; }
.feed-heading > span { padding: 6px 9px; border: 1px solid rgba(42, 255, 154, .18); border-radius: 999px; color: #73ffc0; background: rgba(42, 255, 154, .06); font-size: 9px; font-weight: 800; }

.scene-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.scene-cover { min-height: 102px; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 7px; overflow: hidden; }
.scene-cover b { font-size: 13px; }
.scene-cover small { margin-top: 3px; color: rgba(255, 255, 255, .58); font-size: 9px; }
.scene-purple { background: linear-gradient(145deg, rgba(107, 82, 228, .9), #16121f 82%); }
.scene-warm { background: linear-gradient(145deg, rgba(255, 143, 79, .68), #191018 82%); }
.scene-cyan { background: linear-gradient(145deg, rgba(120, 232, 255, .38), #0d1419 82%); }

.feed-note { margin-top: 12px; padding: 14px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 7px; background: rgba(255, 255, 255, .025); }
.note-user { gap: 9px; }
.note-user > span { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--warm), var(--purple)); }
.note-user b, .note-user small { display: block; }
.note-user b { font-size: 10px; }
.note-user small { color: var(--soft); font-size: 8px; }
.feed-note p { margin: 10px 0 8px; color: var(--muted); font-size: 10px; }
.wave-line { height: 24px; display: flex; align-items: center; gap: 3px; }
.wave-line i { width: 3px; height: 9px; border-radius: 99px; background: var(--purple-2); animation: wave-pulse 1.2s ease-in-out infinite alternate; }
.wave-line i:nth-child(2n) { height: 18px; animation-delay: -300ms; }
.wave-line i:nth-child(3n) { height: 13px; animation-delay: -600ms; }

@keyframes wave-pulse { to { transform: scaleY(.55); opacity: .55; } }

.product-community { padding: 26px 22px; border-left: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, rgba(107, 82, 228, .11), transparent 54%); }
.product-community > small { color: var(--purple-2); font-size: 9px; font-weight: 800; }
.product-community > strong { display: block; margin-top: 14px; font-size: 20px; line-height: 1.12; }
.product-community p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.member-stack { margin-top: 24px; }
.member-stack span { width: 29px; height: 29px; margin-left: -7px; border: 2px solid #0b0911; border-radius: 50%; background: linear-gradient(135deg, var(--purple-2), var(--warm)); }
.member-stack span:first-child { margin-left: 0; }
.member-stack b { margin-left: 8px; font-size: 10px; }
.product-community button { width: 100%; margin-top: 24px; padding: 11px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: rgba(107, 82, 228, .55); color: #fff; font: inherit; font-size: 10px; font-weight: 800; }

.proof-strip {
  position: relative;
  z-index: 5;
  width: min(var(--page), calc(100vw - 64px));
  margin-top: -18px;
  padding: 0;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(7, 6, 12, .82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

.proof-item {
  min-height: 124px;
  padding: 25px 28px;
  border-radius: 0;
  background: transparent;
}

.proof-item + .proof-item { border-left: 1px solid rgba(255, 255, 255, .07); }
.proof-item strong { font-size: 27px; }
.proof-item span { max-width: 190px; }

.section-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.section-meta > span {
  min-width: 32px;
  color: rgba(255, 255, 255, .28);
  font-size: 11px;
  font-weight: 800;
}

.section-meta::after {
  content: "";
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, rgba(107, 82, 228, .72), transparent);
}

.section-meta .eyebrow { margin: 0; }

h2 {
  font-size: clamp(44px, 5.4vw, 70px);
  line-height: .98;
  text-wrap: balance;
}

.section-intro { max-width: 940px; margin-bottom: 62px; }

[data-cursor-light] {
  --light-x: 50%;
  --light-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[data-cursor-light]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--light-x) var(--light-y), rgba(107, 82, 228, .16), transparent 54%);
  opacity: 0;
  transition: opacity 220ms ease;
}

[data-cursor-light]:hover::before { opacity: 1; }

.problem-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.problem-card {
  grid-column: span 4;
  min-height: 330px;
  padding: 30px;
  border-color: rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  transition: transform 260ms var(--ease-out), border-color 220ms ease, background 220ms ease;
}

.problem-card:hover {
  transform: translateY(-5px);
  border-color: rgba(163, 148, 255, .24);
}

.problem-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  background: rgba(255, 255, 255, .025);
}

.problem-card h3 { margin-top: 92px; font-size: 26px; }

.feature-showcase {
  min-height: 720px;
  padding: 14px;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
}

.feature-list {
  align-self: stretch;
  align-content: center;
  gap: 4px;
  padding: 30px;
}

.feature-tab {
  position: relative;
  min-height: 124px;
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  transition: background 220ms ease, border-color 220ms ease, transform 180ms var(--ease-out);
}

.feature-tab:hover { background: rgba(255, 255, 255, .035); }
.feature-tab:active { transform: scale(.985); }
.feature-tab.active { background: rgba(107, 82, 228, .16); border-color: rgba(163, 148, 255, .18); }
.feature-tab.active::after { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; background: var(--purple-2); box-shadow: 0 0 18px rgba(163, 148, 255, .68); }
.feature-tab strong { font-size: 22px; }

.feature-visual {
  min-height: 730px;
  border-color: rgba(255, 255, 255, .08);
  background:
    linear-gradient(160deg, rgba(107, 82, 228, .14), transparent 42%),
    radial-gradient(ellipse 62% 46% at 50% 74%, rgba(107, 82, 228, .18), transparent 72%),
    #07060c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.phone {
  border-color: rgba(255, 255, 255, .17);
  box-shadow: 0 55px 120px rgba(0, 0, 0, .58), 0 0 0 1px rgba(107, 82, 228, .17), 0 0 80px rgba(107, 82, 228, .13);
}

.phone-feature {
  transform: rotate(2deg) translateY(0);
  transition: transform 500ms var(--ease-out);
}

.feature-showcase:hover .phone-feature { transform: rotate(0) translateY(-6px); }

.split-section,
.paid-groups,
.premium { gap: 72px; }

.identity-panel {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  padding: 40px;
  border-color: rgba(255, 255, 255, .09);
  background: linear-gradient(150deg, rgba(107, 82, 228, .11), rgba(255, 255, 255, .018) 58%);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .30);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}

.identity-radar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.identity-radar span {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(107, 82, 228, .14);
  border-radius: 50%;
}

.identity-radar span:nth-child(2) { width: 56%; border-color: rgba(163, 148, 255, .14); }
.identity-radar span:nth-child(3) { width: 34%; border-color: rgba(255, 255, 255, .10); }

.dna-card,
.badge-row { position: relative; z-index: 1; }
.dna-card { padding: 36px; background: rgba(5, 4, 9, .86); box-shadow: 0 28px 70px rgba(0, 0, 0, .34); }
.dna-card h3 { font-size: clamp(30px, 3.5vw, 44px); }
.badge-row span { border-radius: 999px; background: rgba(7, 6, 12, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.artist-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.artist-card {
  grid-column: span 3;
  min-height: 370px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-color: rgba(255, 255, 255, .08);
  background: linear-gradient(150deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  transition: transform 260ms var(--ease-out), border-color 220ms ease;
}

.artist-card:hover { transform: translateY(-5px); border-color: rgba(163, 148, 255, .24); }
.artist-card-wide { grid-column: span 6; background: linear-gradient(145deg, rgba(107, 82, 228, .19), rgba(255, 255, 255, .015) 62%); }
.artist-card-accent { background: linear-gradient(155deg, rgba(107, 82, 228, .72), rgba(43, 27, 88, .34)); }
.artist-card h3 { margin-top: 0; font-size: 29px; }
.artist-card p { max-width: 470px; }

.artist-cta {
  margin-top: 12px;
  padding: 34px;
  border-color: rgba(163, 148, 255, .15);
  background: rgba(107, 82, 228, .075);
}

.paid-image {
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}

.paid-image img {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 8px;
  box-shadow: var(--shadow-deep), 0 0 90px rgba(107, 82, 228, .12);
}

.revenue-float {
  position: absolute;
  right: -24px;
  bottom: 34px;
  width: 180px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  background: rgba(10, 8, 17, .76);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .42);
}

.revenue-float span,
.revenue-float small { display: block; color: var(--muted); font-size: 10px; }
.revenue-float strong { display: block; margin: 8px 0 4px; font-size: 44px; line-height: 1; }

.check-list li {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .025);
}

.premium-card {
  position: relative;
  overflow: hidden;
  padding: 54px;
  border-color: rgba(255, 255, 255, .16);
  background:
    linear-gradient(145deg, rgba(107, 82, 228, .94), rgba(69, 42, 149, .72) 58%, rgba(20, 15, 38, .88));
  box-shadow: 0 45px 120px rgba(34, 20, 78, .35);
}

.premium-card::after {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -18%;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(255, 255, 255, .025), 0 0 0 104px rgba(255, 255, 255, .015);
}

.premium-card > * { position: relative; z-index: 1; }
.premium-mini { min-height: 148px; display: grid; grid-template-columns: 86px 1fr; grid-template-rows: auto auto; justify-content: initial; padding: 26px 30px; background: rgba(255, 255, 255, .026); transition: transform 220ms var(--ease-out), border-color 180ms ease; }
.premium-mini:hover { transform: translateX(5px); border-color: rgba(163, 148, 255, .22); }
.premium-mini strong { grid-row: 1 / 3; align-self: center; }
.premium-mini span { align-self: end; font-size: 18px; }
.premium-mini small { align-self: start; margin-top: 6px; color: var(--soft); font-size: 11px; line-height: 1.4; font-weight: 600; }

.movement-marquee { color: rgba(255, 255, 255, .045); font-size: clamp(56px, 7vw, 96px); }

.final-cta {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .10);
  background:
    linear-gradient(180deg, rgba(107, 82, 228, .08), transparent 52%),
    #07060c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 38px 100px rgba(0, 0, 0, .28);
}

.final-cta > *:not(.final-rings) { position: relative; z-index: 2; }
.final-cta img { filter: drop-shadow(0 0 28px rgba(107, 82, 228, .48)); }

.final-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.final-rings span {
  position: absolute;
  width: 320px;
  aspect-ratio: 1;
  border: 1px solid rgba(107, 82, 228, .18);
  border-radius: 50%;
  transform: translate3d(var(--field-x, 0px), var(--field-y, 0px), 0);
}

.final-rings span:nth-child(2) { width: 520px; opacity: .62; }
.final-rings span:nth-child(3) { width: 760px; opacity: .28; }

.reveal,
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.js-reveal .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.btn,
.nav-cta,
.menu-toggle {
  transition: transform 150ms var(--ease-out), background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.btn:active,
.nav-cta:active,
.menu-toggle:active { transform: scale(.97); }

@media (max-width: 1020px) {
  .section-pad { width: min(var(--page), calc(100vw - 48px)); padding: 110px 0; }
  .hero, .hero-card { min-height: 1000px; }
  .hero-card { padding-top: 142px; }
  .hero h1 { font-size: clamp(62px, 9.4vw, 84px); }
  .hero-signal { display: none; }
  .hero-product { width: calc(100vw - 48px); }
  .problem-grid, .artist-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-card, .artist-card, .artist-card-wide { grid-column: auto; }
  .artist-card-wide { grid-column: 1 / -1; }
  .feature-showcase { grid-template-columns: .86fr 1.14fr; }
  .split-section, .paid-groups, .premium { gap: 46px; }
  .revenue-float { right: -10px; }
}

@media (max-width: 700px) {
  .cursor-light { display: none; }
  .section-pad,
  .proof-strip,
  .footer { width: calc(100vw - 32px); }
  .section-pad { padding: 88px 0; }
  .section-band::before { width: calc(100vw - 24px); }

  .topbar,
  .topbar.is-scrolled { top: 14px; width: calc(100vw - 28px); height: 58px; padding: 0 7px 0 10px; }
  .topbar .brand img { width: 34px; height: 34px; }
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { position: relative; display: grid; }
  .mobile-menu.is-open { display: grid; animation: menu-enter 220ms var(--ease-out) both; }

  @keyframes menu-enter {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .hero,
  .hero-card { min-height: 920px; }
  .hero { padding: 0; }
  .hero-card { padding: 116px 18px 0; }
  .hero-copy { width: 100%; }
  .hero-kicker { margin-bottom: 18px; padding: 7px 10px; font-size: 9px; }
  .hero h1 { max-width: 360px; font-size: clamp(48px, 14vw, 60px); line-height: .9; }
  .hero-lead { max-width: 360px; margin-top: 22px; font-size: 14px; line-height: 1.5; }
  .hero-actions { margin-top: 22px; gap: 9px; }
  .hero-actions .btn { min-height: 48px; font-size: 12px; }
  .hero-note { margin-top: 10px; font-size: 10px; }
  .ambient-line { top: 50%; }
  .line-one { width: 620px; height: 330px; }
  .line-two { width: 470px; height: 250px; }
  .line-three { width: 320px; height: 170px; }
  .sound-horizon { top: 590px; width: 360px; height: 150px; }
  .sound-horizon::before { width: 470px; }
  .sound-horizon span:nth-child(1) { width: 120px; height: 66px; }
  .sound-horizon span:nth-child(2) { width: 180px; height: 94px; }
  .sound-horizon span:nth-child(3) { width: 250px; height: 124px; }
  .sound-horizon span:nth-child(4) { width: 340px; height: 150px; }

  .hero-product { bottom: -22px; width: calc(100vw - 28px); height: 280px; transform: translateX(-50%); }
  .product-chrome { height: 42px; grid-template-columns: 1fr auto; padding: 0 12px; }
  .product-search { display: none; }
  .product-shell { height: calc(100% - 42px); grid-template-columns: 1fr; }
  .product-sidebar, .product-community { display: none; }
  .product-feed { padding: 15px; }
  .feed-heading strong { font-size: 16px; }
  .scene-row { margin-top: 12px; gap: 6px; }
  .scene-cover { min-height: 74px; padding: 9px; }
  .scene-cover b { font-size: 10px; }
  .feed-note { margin-top: 7px; padding: 9px; }
  .feed-note p { display: none; }
  .wave-line { height: 18px; }

  .proof-strip { margin-top: -8px; grid-template-columns: repeat(2, 1fr); }
  .proof-item { min-height: 112px; padding: 20px; }
  .proof-item + .proof-item { border-left: 0; }
  .proof-item:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, .07); }
  .proof-item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .07); }
  .proof-item strong { font-size: 23px; }

  h2 { font-size: 38px; }
  .section-intro { margin-bottom: 38px; }
  .section-meta { margin-bottom: 16px; }
  .section-meta::after { width: 36px; }
  .problem-grid, .artist-grid { grid-template-columns: 1fr; }
  .problem-card, .artist-card, .artist-card-wide { grid-column: auto; min-height: 270px; }
  .problem-card h3 { margin-top: 62px; }

  .feature-showcase { min-height: 0; padding: 8px; grid-template-columns: 1fr; }
  .feature-list { padding: 8px; }
  .feature-tab { min-height: 104px; padding: 18px; }
  .feature-tab strong { font-size: 18px; }
  .feature-visual { min-height: 580px; }
  .phone { width: 238px; height: 500px; }

  .split-section, .paid-groups, .premium { gap: 38px; }
  .identity-panel { min-height: 470px; padding: 18px; transform: none; }
  .dna-card { padding: 24px; }
  .dna-card h3 { font-size: 30px; }
  .artist-card h3 { font-size: 25px; }
  .artist-cta { padding: 24px; }
  .artist-cta .btn { width: 100%; }
  .paid-image { transform: none; }
  .revenue-float { right: 10px; bottom: 18px; width: 150px; padding: 14px; }
  .revenue-float strong { font-size: 36px; }
  .premium-card { padding: 32px 26px; }
  .premium-mini { min-height: 138px; grid-template-columns: 66px 1fr; padding: 22px; }
  .premium-mini strong { font-size: 32px; }
  .premium-mini span { font-size: 16px; }
  .final-cta { min-height: 600px; padding: 34px 22px; }
  .final-rings span:nth-child(3) { width: 560px; }
}

@media (hover: none) {
  [data-cursor-light]::before { display: none; }
  .hero-product,
  .identity-panel,
  .paid-image { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-particle,
  .wave-line i { animation: none !important; }
  .reveal,
  .js-reveal .reveal { opacity: 1; transform: none; }
  .hero-product,
  .identity-panel,
  .paid-image,
  .hero-signal { transform: none !important; }
}

/* Refined hero: single horizon, attached proof strip and magnetic particles */
.hero,
.hero-card {
  min-height: 800px;
}

.hero-card {
  padding-top: 208px;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.hero-ambient {
  z-index: 0;
}

.ambient-line {
  top: 55%;
}

.magnetic-particles {
  position: absolute;
  inset: 0;
}

.ambient-particle {
  left: var(--particle-x);
  top: var(--particle-y);
  width: var(--particle-size, 3px);
  height: var(--particle-size, 3px);
  opacity: var(--particle-opacity, .65);
  transform: translate3d(var(--magnetic-x, 0px), var(--magnetic-y, 0px), 0);
  animation: magnetic-twinkle var(--particle-speed, 7s) ease-in-out var(--particle-delay, 0s) infinite alternate;
  will-change: transform;
}

@keyframes magnetic-twinkle {
  from { opacity: .2; }
  to { opacity: var(--particle-opacity, .65); }
}

.hero-neon-line {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: auto;
  width: 100%;
  height: 1px;
  transform: none;
  background: linear-gradient(90deg, transparent, rgba(107, 82, 228, .72), #ded8ff 50%, rgba(107, 82, 228, .72), transparent);
  box-shadow: 0 0 14px #8f78ff, 0 -18px 62px rgba(107, 82, 228, .52);
}

.signal-left { top: 600px; }
.signal-right { top: 570px; }

.proof-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: -36px;
  border-top-color: rgba(163, 148, 255, .16);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28), 0 -20px 70px rgba(107, 82, 228, .08);
}

.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.proof-item span {
  max-width: 280px;
}

@media (max-width: 1020px) {
  .hero,
  .hero-card { min-height: 780px; }
  .hero-card { padding-top: 190px; }
}

@media (max-width: 720px) {
  .hero,
  .hero-card { min-height: 720px; }
  .hero-card { padding: 150px 18px 0; }
  .ambient-line { top: 50%; }
  .hero-neon-line { width: 100%; }
  .proof-strip {
    grid-template-columns: 1fr;
    margin-top: -24px;
  }
  .proof-item + .proof-item {
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-left: 0;
  }
  .proof-item:nth-child(2n) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-particle {
    animation: none !important;
    transform: none !important;
  }

  .signal-left i { animation: none !important; }
}

/* Hero typography, quiet actions and constellation-style particles */
.hero h1 {
  font-size: clamp(72px, 7.8125vw, 100px);
}

.hero-lead {
  font-weight: 400;
}

.hero .hero-actions .btn-primary,
.hero .hero-actions .btn-secondary {
  overflow: visible;
  border-color: rgba(163, 148, 255, .22);
  background: rgba(107, 82, 228, .18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  text-shadow: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--ease-out);
}

.hero .hero-actions .btn-primary::before,
.hero .hero-actions .btn-secondary::before,
.hero .hero-actions .btn-primary::after,
.hero .hero-actions .btn-secondary::after {
  content: none;
}

.hero .hero-actions .btn-primary:hover,
.hero .hero-actions .btn-secondary:hover {
  border-color: rgba(177, 164, 255, .34);
  background: rgba(107, 82, 228, .27);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  transform: translateY(-1px);
}

.ambient-particle {
  background: rgba(245, 242, 255, .92);
  box-shadow: 0 0 8px rgba(235, 229, 255, .52), 0 0 18px rgba(107, 82, 228, .18);
}

.ambient-particle:nth-child(4n + 2) {
  background: rgba(163, 148, 255, .95);
  box-shadow: 0 0 10px rgba(163, 148, 255, .66), 0 0 24px rgba(107, 82, 228, .30);
}

.ambient-particle:nth-child(5n) {
  box-shadow: 0 0 14px rgba(245, 242, 255, .72), 0 0 30px rgba(107, 82, 228, .24);
}

@media (max-width: 1020px) {
  .hero h1 { font-size: clamp(64px, 8.4vw, 86px); }
}

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(48px, 14vw, 60px); }
}

/* Hero opening sequence */
.hero-intro .hero-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 16% 12% 7%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(107, 82, 228, .22), rgba(107, 82, 228, .055) 42%, transparent 72%);
  filter: blur(34px);
  animation: hero-glow-arrival 1.8s var(--ease-out) both;
}

.hero-intro .ambient-line {
  animation: oval-arrival 1.25s var(--ease-out) both;
}

.hero-intro .line-two { animation-delay: 100ms; }
.hero-intro .line-three { animation-delay: 190ms; }

.hero-intro .magnetic-particles {
  animation: particle-field-arrival 1.45s ease-out 180ms both;
}

.hero-intro .hero-kicker,
.hero-intro .hero h1,
.hero-intro .hero-lead,
.hero-intro .hero-actions {
  animation: hero-copy-arrival .9s var(--ease-out) both;
}

.hero-intro .hero-kicker { animation-delay: 180ms; }
.hero-intro .hero h1 { animation-delay: 300ms; }
.hero-intro .hero-lead { animation-delay: 460ms; }
.hero-intro .hero-actions { animation-delay: 610ms; }

.hero-intro .hero-signal {
  animation: signal-arrival .75s var(--ease-out) 820ms both;
}

.hero-intro .proof-strip {
  animation: proof-arrival .8s var(--ease-out) 920ms both;
}

@keyframes hero-glow-arrival {
  0% { opacity: 0; transform: scale(.72); }
  58% { opacity: 1; }
  100% { opacity: .72; transform: scale(1); }
}

@keyframes oval-arrival {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes particle-field-arrival {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes hero-copy-arrival {
  from { opacity: 0; transform: translateY(24px); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes signal-arrival {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes proof-arrival {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro .hero-card::before,
  .hero-intro .ambient-line,
  .hero-intro .magnetic-particles,
  .hero-intro .hero-kicker,
  .hero-intro .hero h1,
  .hero-intro .hero-lead,
  .hero-intro .hero-actions,
  .hero-intro .hero-signal,
  .hero-intro .proof-strip {
    animation: none !important;
    filter: none !important;
  }
}

/* Section 02: Figma-authored app previews */
.feature-showcase {
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.feature-visual {
  position: relative;
  min-width: 0;
  min-height: 760px;
  padding: 0;
  overflow: clip;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.feature-art-shell {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: visible;
  opacity: 1;
  transition: opacity 130ms ease, transform 360ms var(--ease-out);
}

.feature-art-shell.is-switching {
  opacity: 0;
  transform: scale(.992);
}

.feature-art {
  display: block;
  width: auto;
  height: 720px;
  max-width: 100%;
  margin: 10px auto 0;
  object-fit: contain;
  border: 1px solid rgba(163, 148, 255, .16);
  border-radius: 20px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .46), 0 0 70px rgba(107, 82, 228, .14);
}

.feature-art[hidden],
.explore-scene[hidden],
.feed-scene[hidden],
.group-scene[hidden],
.profile-scene[hidden] {
  display: none !important;
}

.explore-scene {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  perspective: 1100px;
  background:
    radial-gradient(ellipse 48% 54% at 50% 62%, rgba(107, 82, 228, .16), transparent 70%);
}

.explore-scene::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 18%;
  right: 18%;
  bottom: 20px;
  height: 80px;
  border-radius: 50%;
  background: rgba(107, 82, 228, .2);
  filter: blur(42px);
  opacity: .72;
  pointer-events: none;
}

.explore-phone {
  --phone-x: 0px;
  --phone-y: 0px;
  --phone-rx: 0deg;
  --phone-ry: 0deg;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: clamp(238px, 49cqw, 320px);
  transform: translate3d(calc(-50% + var(--phone-x)), calc(-50% + var(--phone-y)), 0)
    rotateX(var(--phone-rx)) rotateY(var(--phone-ry));
  transform-style: preserve-3d;
  transition: filter 260ms ease;
  will-change: transform;
}

.explore-phone img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 48px 42px rgba(0, 0, 0, .62)) drop-shadow(0 0 26px rgba(107, 82, 228, .2));
  animation: explore-phone-breathe 6s ease-in-out infinite;
}

.explore-scene:hover .explore-phone {
  filter: brightness(1.035);
}

.explore-bubble {
  --bubble-x: 0px;
  --bubble-y: 0px;
  position: absolute;
  z-index: 2;
  width: var(--bubble-size);
  aspect-ratio: 1;
  transform: translate3d(var(--bubble-x), var(--bubble-y), 0);
  will-change: transform;
  pointer-events: none;
}

.explore-scene.is-entering .explore-bubble {
  animation: explore-bubble-emerge 980ms cubic-bezier(.16, 1, .3, 1) var(--intro-delay, 0ms) both;
}

.explore-bubble img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .34));
  animation: explore-bubble-drift var(--drift-speed, 7s) ease-in-out var(--drift-delay, 0s) infinite alternate;
}

.bubble-126 { --bubble-size: 18%; --bubble-z: 3; --drift-speed: 7.4s; left: 4%; top: 100px; }
.bubble-127 { --bubble-size: 16%; --bubble-z: 3; --drift-speed: 6.8s; --drift-delay: -2s; right: 4%; top: 78px; }
.bubble-128 { --bubble-size: 20%; --bubble-z: 1; --drift-speed: 8.4s; --drift-delay: -1s; left: 4%; top: 248px; }
.bubble-129 { --bubble-size: 10%; --bubble-z: 2; --drift-speed: 6.2s; right: 16%; top: 178px; }
.bubble-130 { --bubble-size: 12%; --bubble-z: 3; --drift-speed: 7.7s; --drift-delay: -3s; left: 8%; top: 408px; }
.bubble-131 { --bubble-size: 13%; --bubble-z: 5; --drift-speed: 6.9s; --drift-delay: -1.5s; right: 5%; top: 360px; }
.bubble-132 { --bubble-size: 11%; --bubble-z: 1; --drift-speed: 8.8s; right: 18%; top: 500px; }
.bubble-133 { --bubble-size: 15%; --bubble-z: 2; --drift-speed: 8.1s; --drift-delay: -4s; left: 5%; top: 548px; }
.bubble-134 { --bubble-size: 11%; --bubble-z: 5; --drift-speed: 6.5s; --drift-delay: -2s; left: 20%; top: 210px; }
.bubble-135 { --bubble-size: 18%; --bubble-z: 5; --drift-speed: 7.1s; --drift-delay: -3s; right: 4%; top: 540px; }
.bubble-136 { --bubble-size: 14%; --bubble-z: 1; --drift-speed: 9s; --drift-delay: -2s; left: 11%; top: 52px; }
.bubble-137 { --bubble-size: 14%; --bubble-z: 5; --drift-speed: 7.3s; left: 18%; top: 510px; }
.bubble-138 { --bubble-size: 10%; --bubble-z: 2; --drift-speed: 8.6s; --drift-delay: -1s; right: 21%; top: 258px; }
.bubble-139 { --bubble-size: 12%; --bubble-z: 3; --drift-speed: 7.8s; --drift-delay: -3s; left: 5%; top: 320px; }
.bubble-140 { --bubble-size: 15%; --bubble-z: 1; --drift-speed: 8.9s; --drift-delay: -4s; right: 5%; top: 274px; }

@keyframes explore-bubble-emerge {
  0% {
    opacity: 0;
    transform: translate3d(
      calc(var(--bubble-x) + var(--intro-x)),
      calc(var(--bubble-y) + var(--intro-y)),
      0
    ) scale(.16);
  }
  38% { opacity: .5; }
  100% {
    opacity: 1;
    transform: translate3d(var(--bubble-x), var(--bubble-y), 0) scale(1);
  }
}

@keyframes explore-bubble-drift {
  0% { transform: translate3d(-3px, 4px, 0) rotate(-1.2deg); }
  100% { transform: translate3d(4px, -6px, 0) rotate(1.2deg); }
}

@keyframes explore-phone-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.feed-scene {
  --feed-progress: 0%;
  position: relative;
  width: 100%;
  height: 720px;
  overflow: visible;
  container-type: inline-size;
  isolation: isolate;
}

.feed-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 17%;
  right: 17%;
  bottom: 30px;
  height: 150px;
  border-radius: 50%;
  background: rgba(107, 82, 228, .2);
  filter: blur(62px);
  opacity: .62;
  pointer-events: none;
}

.feed-phone {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: clamp(238px, 49cqw, 320px);
  transform: translate(-50%, -50%);
  will-change: opacity;
}

.feed-phone img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
  filter: drop-shadow(0 48px 42px rgba(0, 0, 0, .58)) drop-shadow(0 0 28px rgba(107, 82, 228, .18));
}

.feed-post {
  position: absolute;
  z-index: 3;
  top: 300px;
  left: 50%;
  width: min(61%, 390px);
  aspect-ratio: 1423 / 821;
  transform: translateX(-50%);
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, .46));
}

.feed-post-content {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform, opacity;
}

.feed-post-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feed-playback-toggle {
  position: absolute;
  z-index: 2;
  top: 25.8%;
  left: 81.7%;
  width: 4.2%;
  min-width: 18px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform 160ms ease, filter 160ms ease;
}

.feed-playback-toggle:hover {
  transform: translateX(-50%) scale(1.12);
  filter: drop-shadow(0 0 10px rgba(163, 148, 255, .65));
}

.feed-playback-toggle:active { transform: translateX(-50%) scale(.94); }

.feed-pause-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feed-play-icon {
  display: none;
  width: 0;
  height: 0;
  margin-left: 10%;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

.feed-scene.is-paused .feed-pause-icon { display: none; }
.feed-scene.is-paused .feed-play-icon { display: block; }

.feed-progress {
  position: absolute;
  z-index: 2;
  top: 50.45%;
  left: 75.3%;
  width: 12.8%;
  height: max(3px, .65cqw);
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
}

.feed-progress span {
  display: block;
  width: var(--feed-progress);
  height: 100%;
  border-radius: inherit;
  background: #6b52e4 url("./assets/assets_feed/webp/rectangle-6439.webp") center / 100% 100% no-repeat;
  box-shadow: 0 0 10px rgba(107, 82, 228, .58);
}

.feed-timer {
  position: absolute;
  z-index: 2;
  top: 54.4%;
  left: 74.2%;
  width: 15%;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(10px, 2.05cqw, 15px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
}

.feed-react {
  position: absolute;
  z-index: 4;
  width: clamp(34px, 8cqw, 54px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(107, 82, 228, .4));
  animation: feed-react-pulse 2.35s ease-in-out infinite;
}

.feed-react-left { left: 12%; top: 322px; }
.feed-react-right { right: 11%; top: 420px; animation-delay: -1.05s; }

.feed-scene.is-entering .feed-phone img {
  animation: feed-layer-enter 920ms cubic-bezier(.16, 1, .3, 1) both;
}

.feed-scene.is-entering .feed-post-content {
  animation: feed-layer-enter 1040ms cubic-bezier(.16, 1, .3, 1) 130ms both;
}

@keyframes feed-layer-enter {
  0% { opacity: 0; transform: scale(.72); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes feed-react-pulse {
  0%, 100% { transform: scale(.94); opacity: .72; }
  50% { transform: scale(1.09); opacity: 1; }
}

.group-scene {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: visible;
  container-type: inline-size;
  isolation: isolate;
}

.group-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 18%;
  right: 18%;
  bottom: 28px;
  height: 150px;
  border-radius: 50%;
  background: rgba(107, 82, 228, .2);
  filter: blur(64px);
  opacity: .6;
  pointer-events: none;
}

.group-phone {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(238px, 49cqw, 320px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 48px 42px rgba(0, 0, 0, .58)) drop-shadow(0 0 28px rgba(107, 82, 228, .17));
  will-change: opacity;
}

.group-phone img,
.group-memoji img,
.group-avatar img {
  display: block;
  width: 100%;
  height: auto;
}

.group-memoji {
  position: absolute;
  z-index: 1;
  width: clamp(48px, 10cqw, 70px);
  pointer-events: none;
  will-change: opacity;
}

.group-memoji-green { left: 6%; top: 500px; }
.group-memoji-glasses { right: 5%; top: 285px; }
.group-memoji-blue { right: 4%; top: 565px; }
.group-memoji-cap { right: 7%; top: 445px; }
.group-memoji-hat { left: 5%; top: 370px; }

.group-avatar {
  position: absolute;
  z-index: 3;
  top: 1%;
  right: -17%;
  width: 43%;
  pointer-events: none;
  will-change: opacity;
}

.group-avatar img {
  transform-origin: 50% 72%;
  animation: group-avatar-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .34));
}

.group-scene.is-entering .group-phone,
.group-scene.is-entering .group-avatar,
.group-scene.is-entering .group-memoji {
  animation: group-layer-fade 760ms ease both;
}

.group-scene.is-entering .group-phone { animation-delay: 80ms; }
.group-scene.is-entering .group-avatar { animation-delay: 150ms; }
.group-scene.is-entering .group-memoji-green { animation-delay: 40ms; }
.group-scene.is-entering .group-memoji-glasses { animation-delay: 90ms; }
.group-scene.is-entering .group-memoji-blue { animation-delay: 130ms; }
.group-scene.is-entering .group-memoji-cap { animation-delay: 170ms; }
.group-scene.is-entering .group-memoji-hat { animation-delay: 210ms; }

@keyframes group-layer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes group-avatar-pulse {
  0%, 100% { transform: scale(.975); }
  50% { transform: scale(1.035); }
}

.profile-scene {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: visible;
  container-type: inline-size;
  isolation: isolate;
}

.profile-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 18%;
  right: 18%;
  bottom: 28px;
  height: 150px;
  border-radius: 50%;
  background: rgba(107, 82, 228, .16);
  filter: blur(64px);
  opacity: .56;
  pointer-events: none;
}

.profile-phone {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(238px, 49cqw, 320px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 48px 42px rgba(0, 0, 0, .58)) drop-shadow(0 0 28px rgba(107, 82, 228, .14));
  will-change: opacity;
}

.profile-phone > img,
.profile-highlight img {
  display: block;
  width: 100%;
  height: auto;
}

.profile-highlight {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.profile-highlight-theme {
  top: 2%;
  left: -18%;
  width: 53%;
}

.profile-highlight-music {
  top: 57%;
  right: -16%;
  width: 47%;
}

.profile-highlight img {
  transform-origin: center;
  animation: profile-highlight-pulse 3.15s ease-in-out infinite;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .28));
}

.profile-highlight-music img { animation-delay: -1.45s; }

.profile-scene.is-entering .profile-phone {
  animation: profile-layer-fade 820ms ease both;
}

@keyframes profile-layer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes profile-highlight-pulse {
  0%, 100% { transform: scale(.98); }
  50% { transform: scale(1.035); }
}

@media (max-width: 1020px) {
  .feature-visual,
  .feature-art-shell,
  .explore-scene,
  .feed-scene,
  .group-scene,
  .profile-scene { min-height: 0; height: 680px; }
  .feature-art { height: 650px; }
  .explore-phone,
  .feed-phone,
  .group-phone,
  .profile-phone { top: 50%; }
  .feed-post { top: 286px; width: min(64%, 390px); }
}

@media (max-width: 720px) {
  .feature-visual {
    min-height: 620px;
    padding: 0;
  }

  .feature-art-shell,
  .explore-scene,
  .feed-scene,
  .group-scene,
  .profile-scene {
    height: 620px;
  }

  .feature-art {
    height: 580px;
    border-radius: 16px;
  }

  .explore-phone { top: 50%; width: 56%; }

  .bubble-126 { left: 3%; top: 98px; }
  .bubble-127 { right: 3%; top: 88px; }
  .bubble-128 { left: 3%; top: 238px; }
  .bubble-130 { left: 6%; top: 374px; }
  .bubble-131 { right: 3%; top: 340px; }
  .bubble-132 { top: 455px; }
  .bubble-133 { top: 500px; }
  .bubble-135 { right: 3%; top: 490px; }
  .bubble-137 { top: 470px; }
  .bubble-140 { right: 3%; top: 264px; }

  .feed-phone { top: 50%; width: 56%; }
  .feed-post { top: 230px; width: 68%; }
  .feed-react { width: clamp(30px, 10cqw, 40px); }
  .feed-react-left { left: 8%; top: 254px; }
  .feed-react-right { right: 7%; top: 350px; }

  .group-phone { top: 50%; width: 56%; }
  .profile-phone { top: 50%; width: 56%; }
  .group-memoji { width: clamp(40px, 13cqw, 50px); }
  .group-memoji-green { left: 5%; top: 438px; }
  .group-memoji-glasses { right: 4%; top: 250px; }
  .group-memoji-blue { right: 4%; top: 495px; }
  .group-memoji-cap { right: 6%; top: 390px; }
  .group-memoji-hat { left: 4%; top: 325px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-art-shell { transition: none; }
  .explore-phone img,
  .explore-bubble,
  .explore-bubble img,
  .feed-phone img,
  .feed-post-content,
  .feed-react,
  .group-phone,
  .group-avatar,
  .group-avatar img,
  .group-memoji,
  .profile-phone,
  .profile-highlight img { animation: none; }
}

/* Section 01 density */
#problem-title {
  max-width: 940px;
  font-size: clamp(40px, 4.25vw, 56px);
  line-height: 1.02;
}

.problem-card h3 {
  margin-top: 48px;
}

@media (max-width: 720px) {
  #problem-title {
    font-size: clamp(34px, 9.5vw, 42px);
    line-height: 1.06;
  }

  .problem-card h3 {
    margin-top: 34px;
  }
}

/* Mobile-first artist and premium presentation */
.artist-section .section-intro {
  max-width: 980px;
}

.artist-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.artist-card,
.artist-card-wide {
  grid-column: auto;
  min-height: 230px;
  padding: 26px;
}

.artist-card-index {
  margin-bottom: auto;
  color: rgba(255, 255, 255, .48);
  font-size: 12px;
  font-weight: 700;
}

.artist-card h3 {
  font-size: clamp(22px, 2.2vw, 30px);
}

.artist-card p {
  margin-top: 10px;
  font-size: 15px;
}

.premium.section-pad {
  padding-top: 56px;
  padding-bottom: 56px;
}

.premium {
  display: block;
}

.premium-card {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
  align-items: center;
  gap: 42px;
}

.premium-card h2 {
  max-width: 600px;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.04;
}

.premium-card p {
  max-width: 560px;
  margin-top: 16px;
  font-size: 16px;
}

.premium-benefits {
  display: grid;
  gap: 8px;
}

.premium-benefit {
  min-height: 72px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(7, 6, 12, .22);
}

.premium-benefit strong {
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.premium-benefit span {
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  font-weight: 700;
}

.movement[hidden] {
  display: none;
}

#app,
#artists,
#premium,
#waitlist {
  scroll-margin-top: 92px;
}

.premium + .waitlist {
  padding-top: 32px;
}

@media (max-width: 900px) {
  .premium-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 700px) {
  .footer-links {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .artist-section.section-pad {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .artist-section .section-intro {
    margin-bottom: 28px;
  }

  .artist-section .section-intro h2 {
    font-size: clamp(32px, 9vw, 40px);
    line-height: 1.05;
  }

  .artist-section .section-intro > p {
    margin-top: 16px;
    font-size: 16px;
  }

  .artist-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .artist-card,
  .artist-card-wide {
    min-height: 158px;
    padding: 20px;
  }

  .artist-card-index {
    margin-bottom: 24px;
  }

  .artist-card h3 {
    font-size: 23px;
  }

  .artist-card p {
    font-size: 14px;
  }

  .premium.section-pad {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .premium + .waitlist {
    padding-top: 24px;
  }

  .premium-card {
    padding: 24px 18px 18px;
    gap: 24px;
  }

  .premium-card h2 {
    font-size: clamp(30px, 8.5vw, 38px);
  }

  .premium-card p {
    font-size: 15px;
  }

  .premium-benefit {
    min-height: 62px;
    grid-template-columns: 38px 1fr;
    padding: 12px;
    gap: 10px;
  }

  .premium-benefit strong {
    font-size: 17px;
  }

  .premium-benefit span {
    font-size: 14px;
  }
}