:root {
  --navy: #050b18;
  --navy-2: #08152b;
  --panel: #0c1c35;
  --cyan: #25ddf4;
  --blue: #1c8dff;
  --gold: #e7b75a;
  --white: #f7fbff;
  --muted: #aabbd0;
  --line: rgba(145, 210, 255, .16);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--white);
  background: var(--navy);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(5, 11, 24, .84);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
nav { display: flex; align-items: center; gap: 28px; color: #d8e8f8; font-size: .93rem; }
nav a:hover { color: var(--cyan); }
.nav-cta { padding: 9px 16px; border: 1px solid rgba(37, 221, 244, .45); border-radius: 999px; color: var(--cyan); }
.menu-button { display: none; }

.wix-hero {
  display: grid;
  min-height: 770px;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(40px, 8vw, 150px);
  align-items: start;
  padding: 156px max(44px, calc((100vw - 1760px) / 2)) 44px;
  background: #020d20;
}
.wix-hero-copy {
  min-width: 0;
}
.wix-tagline {
  margin: 0 0 58px;
  color: #00e4f5;
  font-size: clamp(1.12rem, 1.55vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -.04em;
}
.wix-hero h1 {
  margin: 0;
  color: #f8f9fb;
  font-size: clamp(4rem, 7.2vw, 8rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.055em;
}
.wix-hero-description {
  max-width: 780px;
  margin: 64px 0 0;
  color: #9bc8ff;
  font-size: clamp(1rem, 1.25vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.wix-hero-image {
  padding-top: 6px;
}
.wix-hero-image img {
  display: block;
  width: 100%;
  aspect-ratio: 2.23 / 1;
  object-fit: cover;
  object-position: center 4%;
}

.hero {
  position: relative;
  display: grid;
  min-height: 790px;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,11,24,.97) 5%, rgba(5,11,24,.84) 42%, rgba(5,11,24,.18) 75%),
    linear-gradient(0deg, var(--navy) 0%, transparent 38%),
    url("detrack-installer-splash.png") 68% center / cover no-repeat;
  filter: saturate(.95);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: min(700px, calc(100% - 48px));
  margin: 74px max(24px, calc((100vw - var(--max)) / 2)) 0;
  padding: 70px 0;
}
.eyebrow {
  margin: 0 0 16px;
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 24px; font-size: clamp(3rem, 6.5vw, 6rem); line-height: .98; letter-spacing: -.065em; }
h1 span { color: var(--cyan); }
h2 { margin-bottom: 18px; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.05; letter-spacing: -.045em; }
h3 { margin-bottom: 10px; font-size: 1.28rem; line-height: 1.25; }
.hero-copy { max-width: 650px; color: #d0deec; font-size: 1.13rem; }
.actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 32px 0 22px; }
.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { color: #001019; background: linear-gradient(135deg, var(--cyan), #36a9ff); box-shadow: 0 12px 34px rgba(32, 198, 239, .22); }
.button.secondary { border: 1px solid rgba(255,255,255,.22); background: rgba(4, 14, 30, .55); }
.privacy-note { color: var(--muted); font-size: .91rem; }
.privacy-note span { color: #48e69b; }

.visual-banner {
  position: relative;
  display: grid;
  min-height: clamp(420px, 48vw, 850px);
  place-items: center;
  margin-top: 74px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: url("detrack-installer-splash.png") center 17% / cover no-repeat;
}
.visual-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 7, 18, .08), transparent 30%, transparent 70%, rgba(0, 7, 18, .08));
  pointer-events: none;
}
.visual-banner-caption {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 40px);
  padding: 2px 5px;
  color: #fff;
  background: rgba(0, 8, 20, .88);
  font-size: clamp(1rem, 1.55vw, 1.65rem);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-shadow: 0 1px 1px #000;
}

.demo-section {
  width: 100%;
  padding: 20px 16px 78px;
  background: #020d20;
}
.demo-section h2 {
  margin: 0 0 28px;
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  text-align: center;
}
.demo-frame {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid #075276;
  border-radius: 16px;
  background: #071a38;
}
.demo-frame video {
  display: block;
  width: 100%;
  max-height: 820px;
  border: 0;
  background: #020912;
  object-fit: contain;
}

.section { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 110px 0; }
.section-heading { max-width: 720px; margin-bottom: 45px; }
.section-heading > p:last-child, .requirements > div > p:last-child { color: var(--muted); font-size: 1.08rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card, .profile-card {
  position: relative;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(15, 37, 69, .84), rgba(7, 18, 36, .9));
}
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .55; }
.card p, .profile-card p { margin-bottom: 0; color: var(--muted); }
.card-number { display: block; margin-bottom: 42px; color: var(--gold); font: 700 .82rem/1 monospace; }

.musicians-section {
  width: 100%;
  padding: 52px 16px 82px;
  background: #020d20;
}
.musicians-section > h2 {
  margin: 0 0 32px;
  font-size: clamp(3rem, 5.5vw, 6rem);
  text-align: center;
}
.musician-grid {
  display: grid;
  width: min(1840px, 100%);
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
  margin: 0 auto;
}
.musician-card {
  min-height: 600px;
  padding: 46px 46px 54px;
  border: 1px solid #0c467e;
  border-radius: 11px;
  background: #071a38;
  text-align: center;
}
.musician-card img {
  width: min(290px, 75%);
  aspect-ratio: 1;
  border: 2px solid #00e7f4;
  border-radius: 50%;
  object-fit: cover;
}
.musician-card h3 {
  margin: 27px 0 20px;
  color: #00e8f5;
  font-size: clamp(1.75rem, 2.5vw, 2.6rem);
  letter-spacing: -.055em;
}
.musician-card p {
  max-width: 510px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(1rem, 1.25vw, 1.45rem);
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -.035em;
}

.profiles { width: 100%; padding-left: max(24px, calc((100vw - var(--max)) / 2)); padding-right: max(24px, calc((100vw - var(--max)) / 2)); background: var(--navy-2); }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.profile-card { min-height: 250px; padding-top: 70px; }
.profile-card.featured { border-color: rgba(37, 221, 244, .48); box-shadow: inset 0 0 45px rgba(37, 221, 244, .05); }
.profile-label { position: absolute; top: 25px; color: var(--gold) !important; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: start; padding: 23px 0; border-bottom: 1px solid var(--line); }
.steps span { color: var(--cyan); font: 700 1.1rem/1.6 monospace; }
.steps p { display: grid; grid-template-columns: minmax(210px, .6fr) 1fr; margin: 0; color: var(--muted); }
.steps strong { color: var(--white); font-size: 1.05rem; }

.requirements {
  display: grid;
  width: 100%;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  padding-left: max(24px, calc((100vw - var(--max)) / 2));
  padding-right: max(24px, calc((100vw - var(--max)) / 2));
  background: linear-gradient(130deg, #071933, #07101f);
}
.requirement-list { margin: 0; padding: 0; list-style: none; }
.requirement-list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.requirement-list span { color: var(--cyan); font-weight: 900; }

.faq-list { max-width: 880px; }
details { border-bottom: 1px solid var(--line); }
summary { padding: 24px 0; cursor: pointer; font-size: 1.1rem; font-weight: 750; }
details p { padding: 0 34px 24px 0; color: var(--muted); }

.purchase-banner {
  position: relative;
  display: grid;
  min-height: 720px;
  place-items: center;
  overflow: hidden;
  padding: 90px 24px 55px;
  background:
    linear-gradient(rgba(0, 13, 32, .48), rgba(0, 13, 32, .58)),
    url("detrack-installer-splash.png") center 11% / cover no-repeat;
  text-align: center;
}
.purchase-banner-content {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
}
.purchase-banner h2 {
  margin-bottom: 10px;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 850;
  letter-spacing: -.06em;
}
.purchase-banner p {
  margin-bottom: 38px;
  font-size: clamp(1.15rem, 1.65vw, 1.8rem);
  font-weight: 800;
}
.purchase-price {
  margin-bottom: 45px;
  color: #00e8f5;
  font-size: clamp(5rem, 8vw, 8rem);
  font-weight: 850;
  line-height: .9;
  letter-spacing: -.06em;
}
.purchase-button {
  display: flex;
  width: min(570px, 100%);
  min-height: 98px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: #001226;
  background: #12deef;
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  font-weight: 850;
  letter-spacing: .05em;
}
.purchase-banner small {
  display: block;
  margin-top: 18px;
  color: #b9d9ff;
  font-size: clamp(.95rem, 1.1vw, 1.25rem);
  font-weight: 750;
}
.disabled { cursor: not-allowed; filter: saturate(.45); opacity: .72; }

footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 30px;
  align-items: center;
  padding: 34px max(24px, calc((100vw - var(--max)) / 2));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
}
footer p { margin: 0; }

@media (max-width: 900px) {
  .wix-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 130px 32px 70px;
  }
  .wix-tagline { margin-bottom: 35px; }
  .wix-hero-description { margin-top: 40px; }
  .wix-hero-image { padding-top: 0; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .musician-grid { grid-template-columns: 1fr; }
  .musician-card { min-height: auto; }
  .profile-grid { grid-template-columns: 1fr; }
  .requirements { grid-template-columns: 1fr; gap: 30px; }
  footer { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .menu-button { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--white); background: transparent; }
  nav { position: absolute; top: 74px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 15px 24px 24px; border-bottom: 1px solid var(--line); background: rgba(5, 11, 24, .98); }
  nav.open { display: flex; }
  nav a { padding: 11px 0; }
  .nav-cta { margin-top: 8px; text-align: center; }
  .wix-hero {
    padding: 118px 20px 55px;
  }
  .wix-hero h1 {
    font-size: clamp(3.2rem, 17vw, 5rem);
  }
  .hero { min-height: 720px; }
  .hero-art { background-position: 61% center; opacity: .6; }
  .hero-content { padding-top: 100px; }
  .visual-banner {
    min-height: 390px;
    background-position: 50% top;
  }
  .demo-section { padding: 15px 10px 55px; }
  .demo-frame { padding: 12px; }
  .section { width: min(100% - 32px, var(--max)); padding: 80px 0; }
  .profiles, .requirements { width: 100%; padding-left: 16px; padding-right: 16px; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps p { grid-template-columns: 1fr; gap: 4px; }
  .musician-card { padding: 35px 24px 42px; }
  .purchase-banner { min-height: 610px; }
  .purchase-button { min-height: 78px; }
}