:root {
  --bg: #08090b;
  --bg-soft: #101216;
  --panel: #14161a;
  --panel-2: #191b20;
  --text: #f4f0e8;
  --text-soft: #b7b2a9;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(212,166,85,.45);
  --gold: #d2a55a;
  --gold-light: #f1c77e;
  --gold-dark: #8f6730;
  --white: #fff;
  --danger: #ff8f8f;
  --success: #b9e3bb;
  --shadow: 0 30px 80px rgba(0,0,0,.36);
  --radius: 22px;
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 10%, rgba(210,165,90,.08), transparent 26rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
fieldset { min-width: 0; }
.container { width: var(--container); margin-inline: auto; }
.section { padding: 110px 0; }
.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;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  transform: translateY(-160%); padding: 10px 14px;
  background: var(--white); color: #000; border-radius: 8px;
}
.skip-link:focus { transform: none; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold-light);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  line-height: 1.08;
  letter-spacing: -.035em;
}
h1 {
  margin-bottom: 16px;
  font-size: clamp(4rem, 11vw, 9.6rem);
  font-weight: 800;
  letter-spacing: -.055em;
}
h2 {
  margin-bottom: 22px;
  max-width: 18ch;
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
  font-weight: 690;
}
h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}
p { color: var(--text-soft); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 82px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  background: rgba(8,9,11,.84);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.brand-main {
  font-size: 1.08rem;
  font-weight: 820;
  letter-spacing: .075em;
}
.brand-sub {
  margin-top: 6px;
  font-size: .57rem;
  letter-spacing: .22em;
}
.main-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.main-nav a {
  color: rgba(255,255,255,.74);
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--white); }
.nav-toggle { display: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--white);
  background: transparent;
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .075em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover {
  transform: translateY(-2px);
  border-color: var(--gold-light);
}
.button-primary {
  border-color: var(--gold);
  background: linear-gradient(135deg, #b68036, #e2b968);
  color: #16110a;
  box-shadow: 0 12px 34px rgba(191,138,57,.2);
}
.button-primary:hover { background: linear-gradient(135deg, #c38c3c, #efc97c); }
.button-small { min-height: 42px; padding-inline: 18px; font-size: .69rem; }

.hero {
  position: relative;
  min-height: 860px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-media {
  position: absolute;
  inset: 0 0 0 34%;
  background:
    linear-gradient(90deg, rgba(8,9,11,1) 0%, rgba(8,9,11,.18) 34%, rgba(8,9,11,.05) 100%),
    url("../images/hero-soundwall.webp") center / cover no-repeat;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #08090b 0%, rgba(8,9,11,.96) 24%, rgba(8,9,11,.2) 68%, rgba(8,9,11,.4)),
    linear-gradient(0deg, #08090b 0%, transparent 28%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 145px 0 170px;
}
.hero-content > * { max-width: 720px; }
.hero-subtitle {
  max-width: 650px;
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(1.55rem, 3.2vw, 3rem);
  font-weight: 390;
  line-height: 1.2;
}
.hero-intro { max-width: 520px; font-size: 1.14rem; }
.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 36px;
}
.text-link {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-soft);
}
.text-link:hover { color: var(--white); }

.hero-feature-strip {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-inline: max(24px, calc((100vw - 1180px) / 2));
  background: rgba(7,8,10,.82);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.hero-mini-feature {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-right: 1px solid var(--line);
}
.hero-mini-feature:first-child { border-left: 1px solid var(--line); }
.hero-mini-feature svg { width: 34px; flex: 0 0 auto; color: var(--gold-light); }
.hero-mini-feature span {
  font-size: .73rem;
  font-weight: 720;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.section-intro { background: var(--bg); }
.split-intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 10vw;
  align-items: start;
}
.lead-copy p {
  position: relative;
  padding-left: 28px;
  font-size: 1.13rem;
}
.lead-copy p::before {
  content: "";
  position: absolute;
  left: 0; top: .75em;
  width: 10px; height: 1px;
  background: var(--gold);
}

.feature-section {
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}
.section-heading { margin-bottom: 52px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.018);
}
.feature-card {
  min-height: 310px;
  padding: 34px;
  border-right: 1px solid var(--line);
}
.feature-card:last-child { border-right: 0; }
.icon-wrap {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  margin-bottom: 54px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold-light);
}
.icon-wrap svg { width: 28px; height: 28px; }
.feature-card p { margin-bottom: 0; font-size: .94rem; }

.visual-break {
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 50%, rgba(210,165,90,.11), transparent 24rem),
    #050607;
  border-block: 1px solid var(--line);
}
.visual-break-inner {
  min-height: 420px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 55px;
}
.visual-break-inner img {
  width: 100%;
  filter: drop-shadow(0 22px 36px rgba(0,0,0,.7));
}

.two-column-heading {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 70px;
  align-items: end;
}
.variant-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.variant-card {
  position: relative;
  min-height: 450px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.variant-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.variant-card:hover img { transform: scale(1.035); }
.variant-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,9,11,.95), transparent 58%);
}
.variant-copy {
  position: absolute;
  z-index: 2;
  inset: auto 26px 24px;
}
.variant-copy h3 { font-size: 1.55rem; }
.variant-copy p { margin: 0; }

.status-section {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(210,165,90,.06), transparent 38%),
    var(--bg-soft);
}
.status-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: center;
}
.status-layout h2 { font-size: clamp(2rem, 3.2vw, 3.2rem); }
.progress-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}
.progress-steps li {
  position: relative;
  display: grid;
  gap: 13px;
  justify-items: center;
  color: #777b84;
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.progress-steps li::before {
  content: "";
  position: absolute;
  top: 24px; left: -50%;
  width: 100%; height: 1px;
  background: #363940;
}
.progress-steps li:first-child::before { display: none; }
.progress-steps span {
  position: relative;
  z-index: 1;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1px solid #444851;
  border-radius: 50%;
  background: var(--bg-soft);
}
.progress-steps .active { color: var(--gold-light); }
.progress-steps .active span {
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(210,165,90,.22);
}

.early-section { background: #f2eee7; color: #161719; }
.early-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.early-section h2 { color: #17181b; }
.early-section p { color: #5f5d58; }
.early-copy { position: sticky; top: 120px; }
.trust-list {
  display: grid;
  gap: 15px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.trust-list li {
  padding: 17px 18px;
  border-left: 2px solid var(--gold-dark);
  background: rgba(0,0,0,.035);
  color: #57544f;
}
.trust-list strong { color: #1b1b1b; }

.interest-form {
  padding: 38px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 20px 65px rgba(30,25,16,.08);
}
.form-message {
  display: none;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 8px;
}
.form-message.success {
  display: block;
  color: #264d2c;
  background: #dff3e1;
}
.form-message.error {
  display: block;
  color: #6c2424;
  background: #f8dddd;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.field > span, .interest-options legend {
  color: #343434;
  font-size: .82rem;
  font-weight: 650;
}
.field small, .interest-options small { font-weight: 400; color: #77736d; }
.field input, .field select {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 5px;
  outline: 0;
  color: #181818;
  background: rgba(255,255,255,.7);
  transition: border .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(143,103,48,.13);
}
.interest-options {
  margin: 10px 0 22px;
  padding: 0;
  border: 0;
}
.interest-options legend { margin-bottom: 12px; }
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.option-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 12px 11px 42px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 5px;
  color: #47443f;
  background: rgba(255,255,255,.4);
  font-size: .85rem;
  cursor: pointer;
}
.option-card input {
  position: absolute;
  left: 14px;
  accent-color: var(--gold-dark);
}
.option-card:has(input:checked) {
  border-color: var(--gold-dark);
  background: rgba(210,165,90,.12);
  color: #201c16;
}
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin: 24px 0;
  color: #54504a;
  font-size: .83rem;
}
.consent input { width: 18px; height: 18px; accent-color: var(--gold-dark); }
.submit-button { width: 100%; }
.legal-note {
  margin: 17px 0 0;
  text-align: center;
  font-size: .72rem;
  line-height: 1.45;
}
.honeypot { position: absolute; left: -9999px; }

.final-cta {
  background:
    radial-gradient(circle at 75% 50%, rgba(210,165,90,.16), transparent 25rem),
    var(--bg);
}
.final-cta-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.final-cta h2 { margin: 0; }

.site-footer {
  padding: 35px 0;
  border-top: 1px solid var(--line);
  background: #050607;
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
.footer-inner p { margin: 0; text-align: center; font-size: .85rem; }
.footer-inner nav { display: flex; gap: 18px; }
.footer-inner nav a { color: var(--text-soft); font-size: .75rem; }
.footer-inner nav a:hover { color: var(--white); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: auto auto; justify-content: space-between; }
  .main-nav {
    position: fixed;
    inset: 82px 0 0;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 35px 24px;
    background: rgba(8,9,11,.98);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-toggle {
    display: grid;
    gap: 5px;
    width: 42px; height: 42px;
    place-content: center;
    border: 1px solid var(--line);
    background: transparent;
  }
  .nav-toggle > span:not(.sr-only) { width: 19px; height: 1px; background: white; }
  .header-cta { display: none; }
  .hero-media { left: 26%; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card:nth-child(2) { border-right: 0; }
  .feature-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .early-layout, .status-layout { grid-template-columns: 1fr; }
  .early-copy { position: static; }
  .progress-steps { margin-top: 15px; }
}

@media (max-width: 760px) {
  :root { --container: min(100% - 28px, 1180px); }
  .section { padding: 76px 0; }
  .site-header { height: 70px; padding: 0 14px; }
  .main-nav { top: 70px; }
  h1 { font-size: clamp(3.6rem, 18vw, 6rem); }
  h2 { font-size: clamp(2rem, 9.8vw, 3rem); }
  .hero { min-height: 760px; align-items: flex-end; }
  .hero-media { inset: 0; opacity: .65; }
  .hero-overlay {
    background:
      linear-gradient(0deg, #08090b 10%, rgba(8,9,11,.62) 70%, rgba(8,9,11,.58)),
      linear-gradient(90deg, rgba(8,9,11,.65), transparent);
  }
  .hero-content { padding: 130px 0 210px; }
  .hero-subtitle { font-size: 1.55rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .text-link { align-self: flex-start; }
  .hero-feature-strip { grid-template-columns: repeat(2, 1fr); padding-inline: 0; }
  .hero-mini-feature { min-height: 86px; padding: 14px; }
  .hero-mini-feature:nth-child(2) { border-right: 0; }
  .hero-mini-feature:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero-mini-feature svg { width: 25px; }
  .hero-mini-feature span { font-size: .61rem; }
  .split-intro, .two-column-heading, .visual-break-inner {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .visual-break-inner { padding-block: 70px; }
  .feature-grid, .variant-grid { grid-template-columns: 1fr; }
  .feature-card {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .feature-card:last-child { border-bottom: 0; }
  .icon-wrap { margin-bottom: 34px; }
  .variant-card { min-height: 390px; }
  .progress-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 26px;
  }
  .progress-steps li:nth-child(4)::before { display: none; }
  .early-layout { gap: 40px; }
  .interest-form { padding: 22px; }
  .field-row, .option-grid { grid-template-columns: 1fr; }
  .final-cta-inner { align-items: flex-start; flex-direction: column; }
  .footer-inner { grid-template-columns: 1fr; justify-items: start; gap: 20px; }
  .footer-inner p { text-align: left; }
}