/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0c0c10;
  --bg-2: #111116;
  --fg: #f0ede8;
  --fg-dim: #8a8792;
  --ember: #ff5a1f;
  --ember-mid: rgba(255, 90, 31, 0.35);
  --ember-dim: rgba(255, 90, 31, 0.12);
  --ember-glow: rgba(255, 90, 31, 0.15);
  --border: rgba(255, 90, 31, 0.15);
  --radius: 6px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography --- */
h1, h2, h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(3rem, 7vw, 5.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: 1.1rem; }

p { color: var(--fg-dim); max-width: 48ch; }

.accent { color: var(--ember); }

.section-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1rem;
}

/* --- Nav --- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem 2rem;
  backdrop-filter: blur(16px);
  background: rgba(12, 12, 16, 0.8);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--fg-dim);
  font-size: 0.9rem;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--fg); }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 8rem 2rem 4rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  top: 20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle at center, rgba(255, 90, 31, 0.12) 0%, transparent 60%);
  border-radius: 50%;
}

.hero-glow-2 {
  top: auto;
  bottom: 0%;
  right: auto;
  left: -20%;
  background: radial-gradient(circle at center, rgba(255, 90, 31, 0.06) 0%, transparent 60%);
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-text { max-width: 600px; }

.hero-tag {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid var(--ember-dim);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.hero-text h1 { margin-bottom: 1.5rem; }

.hero-sub {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 46ch;
}

/* --- Hero Visual --- */
.hero-visual {
  position: relative;
}

.waveform-container {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  overflow: hidden;
}

.waveform-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
}

.waveform-svg {
  width: 100%;
  height: 120px;
  display: block;
}

.wave-bar {
  animation: waveAnim 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes waveAnim {
  0%, 100% { d: path("M0,100 L8,100 L8,100 L16,100 L16,100 L24,100 L24,100 L32,100 L32,100 L40,100 L40,100 L48,100 L48,60 L56,140 L56,60 L64,140 L64,60 L72,140 L72,60 L80,140 L80,60 L88,140 L88,60 L96,140 L96,60 L104,140 L104,50 L112,150 L112,50 L120,150 L120,50 L128,150 L128,50 L136,150 L136,50 L144,150 L144,30 L152,170 L152,30 L160,170 L160,30 L168,170 L168,30 L176,170 L176,30 L184,170 L184,25 L192,175 L192,25 L200,175 L200,25 L208,175 L208,25 L216,175 L216,30 L224,170 L224,30 L232,170 L232,30 L240,170 L240,30 L248,170 L248,30 L256,170 L256,35 L264,165 L264,35 L272,165 L272,35 L280,165 L280,35 L288,165 L288,40 L296,160 L296,40 L304,160 L304,40 L312,160 L312,40 L320,160 L320,40 L328,160 L328,45 L336,155 L336,45 L344,155 L344,45 L352,155 L352,50 L360,150 L360,50 L368,150 L368,50 L376,150 L376,50 L384,150 L384,50 L392,150 L392,50 L400,150 L400,50 L408,150 L408,50 L416,150 L416,50 L424,150 L424,50 L432,150 L432,55 L440,145 L440,55 L448,145 L448,55 L456,145 L456,55 L464,145 L464,55 L472,145 L472,55 L480,145 L480,55 L488,145 L488,55 L496,145 L496,50 L504,150 L504,50 L512,150 L512,50 L520,150 L520,50 L528,150 L528,50 L536,150 L536,45 L544,155 L544,45 L552,155 L552,45 L560,155 L560,45 L568,155 L568,45 L576,155 L576,40 L584,160 L584,40 L592,160 L592,40 L600,160 L600,40 L608,160 L608,40 L616,160 L616,35 L624,165 L624,35 L632,165 L632,35 L640,165 L640,35 L648,165 L648,30 L656,170 L656,30 L664,170 L664,30 L672,170 L672,30 L680,170 L680,25 L688,175 L688,25 L696,175 L696,25 L704,175 L704,25 L712,175 L712,25 L720,175 L720,30 L728,170 L728,30 L736,170 L736,30 L744,170 L744,30 L752,170 L752,35 L760,165 L760,35 L768,165 L768,35 L776,165 L776,40 L784,160 L784,40 L792,160 L792,40 L800,100"); }
  50% { d: path("M0,100 L8,100 L8,100 L16,100 L16,100 L24,100 L24,100 L32,100 L32,100 L40,100 L40,100 L48,100 L48,80 L56,120 L56,80 L64,120 L64,80 L72,120 L72,80 L80,120 L80,80 L88,120 L88,80 L96,120 L96,80 L104,120 L104,70 L112,130 L112,70 L120,130 L120,70 L128,130 L128,70 L136,130 L136,60 L144,140 L144,60 L152,140 L152,60 L160,140 L160,60 L168,140 L168,60 L176,140 L176,55 L184,145 L184,55 L192,145 L192,55 L200,145 L200,55 L208,145 L208,55 L216,145 L216,60 L224,140 L224,60 L232,140 L232,60 L240,140 L240,60 L248,140 L248,60 L256,140 L256,65 L264,135 L264,65 L272,135 L272,65 L280,135 L280,65 L288,135 L288,70 L296,130 L296,70 L304,130 L304,70 L312,130 L312,70 L320,130 L320,70 L328,130 L328,75 L336,125 L336,75 L344,125 L344,75 L352,125 L352,80 L360,120 L360,80 L368,120 L368,80 L376,120 L376,80 L384,120 L384,80 L392,120 L392,80 L400,120 L400,80 L408,120 L408,80 L416,120 L416,80 L424,120 L424,80 L432,120 L432,85 L440,115 L440,85 L448,115 L448,85 L456,115 L456,85 L464,115 L464,85 L472,115 L472,85 L480,115 L480,85 L488,115 L488,85 L496,115 L496,80 L504,120 L504,80 L512,120 L512,80 L520,120 L520,80 L528,120 L528,80 L536,120 L536,75 L544,125 L544,75 L552,125 L552,75 L560,125 L560,75 L568,125 L568,75 L576,125 L576,70 L584,130 L584,70 L592,130 L592,70 L600,130 L600,70 L608,130 L608,70 L616,130 L616,65 L624,135 L624,65 L632,135 L632,65 L640,135 L640,65 L648,135 L648,60 L656,140 L656,60 L664,140 L664,60 L672,140 L672,60 L680,140 L680,55 L688,145 L688,55 L696,145 L696,55 L704,145 L704,55 L712,145 L712,55 L720,145 L720,60 L728,140 L728,60 L736,140 L736,60 L744,140 L744,60 L752,140 L752,65 L760,135 L760,65 L768,135 L768,65 L776,135 L776,70 L784,130 L784,70 L792,130 L792,70 L800,100"); }
}

.waveform-overlay-text {
  margin-top: 1.5rem;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  color: var(--fg-dim);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.waveform-overlay-text span:first-child {
  color: var(--fg);
  font-weight: 500;
  font-size: 1rem;
}

.waveform-hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--ember);
  opacity: 0.8;
}

/* --- How Section --- */
.how {
  padding: 6rem 2rem;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

.how-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.how-header {
  text-align: center;
  margin-bottom: 4rem;
}

.how-header h2 { max-width: 36ch; margin: 0 auto; }

.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 4rem;
}

.step {
  padding: 0 1.5rem;
}

.step-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--ember-dim);
  margin-bottom: 0.75rem;
  letter-spacing: -0.04em;
}

.step-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--fg);
}

.step-content p {
  font-size: 0.9rem;
  line-height: 1.6;
}

.step-divider {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--ember-dim), transparent);
  align-self: stretch;
}

.how-track {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 2rem;
}

.track-bar {
  display: flex;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.track-section {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.track-note {
  font-size: 0.8rem;
  text-align: center;
  color: var(--fg-dim);
  font-style: italic;
}

/* --- Features Section --- */
.features {
  padding: 6rem 2rem;
}

.features-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.features-header {
  text-align: center;
  margin-bottom: 4rem;
}

.features-header h2 { max-width: 40ch; margin: 0 auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.feature-card {
  background: var(--bg);
  padding: 2rem;
}

.feature-card-main {
  grid-column: span 1;
}

.feature-icon {
  margin-bottom: 1.25rem;
  opacity: 0.9;
}

.feature-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--fg);
}

.feature-card p {
  font-size: 0.875rem;
  line-height: 1.65;
}

.feature-tag {
  display: inline-block;
  margin-top: 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
  background: var(--ember-dim);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

/* --- Sync Section --- */
.sync {
  padding: 6rem 2rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sync-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.sync-visual {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.sync-beats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.beat-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.beat-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fg-dim);
}

.beat-marker-active .beat-dot {
  background: var(--ember);
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.5);
  animation: beatPulse 1s ease-in-out infinite;
}

.beat-marker:nth-child(2) .beat-dot { animation-delay: 0.25s; }
.beat-marker:nth-child(3) .beat-dot { animation-delay: 0.5s; }
.beat-marker:nth-child(4) .beat-dot { animation-delay: 0.75s; }

@keyframes beatPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}

.beat-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.sync-timeline {
  position: relative;
  height: 60px;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.sync-track {
  position: absolute;
  top: 1rem;
  left: 0; right: 0;
  height: 20px;
  display: flex;
  align-items: center;
}

.sync-track-2 { top: 2.5rem; }

.sync-event {
  position: absolute;
  width: 3px;
  height: 100%;
  background: var(--ember);
  border-radius: 2px;
  animation: eventFlash 1s ease-in-out infinite;
}

.sync-track:nth-child(2) .sync-event { animation-delay: 0.5s; }

@keyframes eventFlash {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(255, 90, 31, 0.6); }
}

.sync-content h2 { margin-bottom: 1.25rem; }
.sync-content p { margin-bottom: 2.5rem; }

.sync-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sync-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ember);
  margin-bottom: 0.25rem;
}

.sync-stat-label {
  font-size: 0.8rem;
  color: var(--fg-dim);
}

/* --- Closing Section --- */
.closing {
  padding: 8rem 2rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.closing-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.closing-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.08) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

.closing h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
}

.closing p {
  font-size: 1.1rem;
  max-width: 46ch;
  margin: 0 auto 3rem;
}

.closing-track {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
}

.closing-wave {
  width: 4px;
  height: 100%;
  background: linear-gradient(to top, var(--ember), rgba(255,90,31,0.2));
  border-radius: 2px;
  animation: closingBar 1.2s ease-in-out infinite;
}

.closing-wave:nth-child(1) { animation-delay: 0s; }
.closing-wave:nth-child(2) { animation-delay: 0.2s; }
.closing-wave:nth-child(3) { animation-delay: 0.4s; }

@keyframes closingBar {
  0%, 100% { height: 20%; }
  50% { height: 100%; }
}

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 2rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg);
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--fg-dim);
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-links a {
  text-decoration: none;
  color: var(--fg-dim);
  font-size: 0.85rem;
  transition: color 0.2s;
}

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

/* --- Responsive --- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { order: -1; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .step-divider { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .sync-inner { grid-template-columns: 1fr; gap: 3rem; }
  .sync-stats { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { flex-wrap: wrap; gap: 1rem; }
}

@media (max-width: 600px) {
  h1 { font-size: 2.5rem; }
  .nav { padding: 1rem; }
  .hero { padding: 7rem 1.5rem 3rem; }
  .how, .features, .sync, .closing { padding: 4rem 1.5rem; }
  .sync-stats { grid-template-columns: 1fr; gap: 1rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}