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

:root {
  --dark-blue: #0d1117;
  --neon-green: #00ff41;
  --neon-green-dim: rgba(0, 255, 65, 0.4);
  --neon-green-faint: rgba(0, 255, 65, 0.08);
  --red: #DC143C;
  --gray-text: #b0b0b0;
  --gray-light: #888;
  --gray-dark: #555;
  --gray-darker: #333;
  --border-dark: #1a1f2b;
}

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

/* ── Accessibility: visible keyboard focus ── */
:focus-visible {
  outline: 2px solid var(--neon-green);
  outline-offset: 3px;
  border-radius: 2px;
}

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

body {
  background: var(--dark-blue);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

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

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

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  transition: background 0.3s, backdrop-filter 0.3s;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}

.nav-hamburger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--gray-light);
  transition: all 0.3s ease;
  transform-origin: center;
}

.nav-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
  background: var(--neon-green);
}

.nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
  background: var(--neon-green);
}

/* Mobile Menu */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 17, 23, 0.97);
  backdrop-filter: blur(30px);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-mobile-menu.open {
  display: flex;
  opacity: 1;
}

.nav-mobile-menu a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--gray-light);
  letter-spacing: 1px;
  transition: color 0.2s;
}

.nav-mobile-menu a:hover {
  color: var(--neon-green);
}

.nav-mobile-menu .nav-cta {
  font-size: 20px;
  color: var(--neon-green) !important;
}

.nav-scrolled {
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-dark);
}

.nav-back {
  font-family: 'Silkscreen', cursive;
  font-size: 12px;
  color: var(--gray-dark);
  transition: color 0.2s;
  letter-spacing: 0.5px;
}

.nav-back:hover {
  color: var(--neon-green);
}

.nav-arrow {
  display: inline-block;
  transition: transform 0.2s;
}

.nav-back:hover .nav-arrow {
  transform: translateX(-3px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--gray-light);
  transition: color 0.2s;
  letter-spacing: 0.5px;
}

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

.nav-cta {
  color: var(--neon-green) !important;
  opacity: 0.7;
  transition: opacity 0.2s !important;
}

.nav-cta:hover {
  opacity: 1 !important;
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px 80px;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

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

.hero-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 255, 65, 0.06) 0%, transparent 70%);
}

.hero-grid {
  display: none;
}

.hero-waveform {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  opacity: 0.8;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 580px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--neon-green-faint);
  border: 1px solid rgba(0, 255, 65, 0.2);
  border-radius: 4px;
  padding: 6px 14px;
  font-family: 'Silkscreen', cursive;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--neon-green);
  margin-bottom: 40px;
  animation: fadeDown 0.8s ease both;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--red);
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero-logo {
  width: 280px;
  margin-bottom: 24px;
  animation: fadeDown 0.8s ease 0.1s both;
}

.hero-logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(0, 255, 65, 0.15));
}

.hero-tagline {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.1;
  color: white;
  margin-bottom: 20px;
  animation: fadeDown 0.8s ease 0.2s both;
}

.hero-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--gray-text);
  max-width: 460px;
  margin-bottom: 40px;
  animation: fadeDown 0.8s ease 0.3s both;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  animation: fadeDown 0.8s ease 0.4s both;
}

/* Hero Phone */
.hero-device {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  margin-left: auto;
  z-index: 2;
  animation: floatIn 1s ease 0.5s both;
}

/* CSS Phone Frame */
.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.2;
  background: #1a1a1a;
  border-radius: 40px;
  border: 3px solid #2a2a2a;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  overflow: hidden;
  padding: 4px;
}

.phone-frame .app-screen {
  border-radius: 36px;
  height: 100%;
}

.phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 24px;
  background: #1a1a1a;
  border-radius: 14px;
  z-index: 10;
}

.phone-notch::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0d1117;
  border: 1px solid #333;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 28px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--neon-green);
  color: var(--dark-blue);
  font-weight: 500;
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.2);
}

.btn-primary:hover {
  box-shadow: 0 0 50px rgba(0, 255, 65, 0.35), 0 0 100px rgba(0, 255, 65, 0.1);
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid rgba(0, 255, 65, 0.5);
  color: var(--neon-green);
  background: transparent;
}

.btn-outline:hover {
  background: var(--neon-green-faint);
  border-color: var(--neon-green);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.15), inset 0 0 20px rgba(0, 255, 65, 0.05);
}

.btn-lg {
  height: 56px;
  padding: 0 36px;
  font-size: 14px;
}

/* ── App Store Badges ── */
.store-badge {
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.store-badge img {
  height: 44px;
  width: auto;
}

.download-buttons .store-badge img {
  height: 52px;
}

.store-badge:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* ── Section Labels ── */
.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  line-height: 1.5;
  color: var(--neon-green);
  margin-bottom: 40px;
}

.section-label::after {
  content: '█';
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  font-size: 16px;
}

/* ── Signal Flow Strip ── */
.signal-flow {
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  overflow: hidden;
  position: relative;
}

.signal-flow::before,
.signal-flow::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.signal-flow::before {
  left: 0;
  background: linear-gradient(to right, var(--dark-blue), transparent);
}

.signal-flow::after {
  right: 0;
  background: linear-gradient(to left, var(--dark-blue), transparent);
}

.signal-strip {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 0;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
  width: max-content;
}

.signal-item {
  font-family: 'Silkscreen', cursive;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gray-dark);
  text-transform: uppercase;
}

.signal-sep {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(0, 255, 65, 0.15);
}

/* ── How It Works ── */
.how-it-works {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 40px 120px;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.step-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.step-icon svg {
  width: 100%;
  height: 100%;
}

.step-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.step-platform {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--neon-green);
  opacity: 0.5;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: grid;
  grid-template-columns: 80px 1px 1fr;
  gap: 40px;
  position: relative;
}

.step-number {
  font-family: 'Silkscreen', cursive;
  font-size: 36px;
  color: rgba(0, 255, 65, 0.15);
  text-align: right;
  padding-top: 4px;
}

.step-line {
  width: 1px;
  background: linear-gradient(to bottom, var(--neon-green), transparent);
  opacity: 0.2;
  position: relative;
}

.step-line::before {
  content: '';
  position: absolute;
  top: 8px;
  left: -4px;
  width: 9px;
  height: 9px;
  background: var(--neon-green);
  border-radius: 50%;
  animation: timeline-pulse 2.5s ease-in-out infinite;
}

.step:nth-child(2) .step-line::before { animation-delay: 0.5s; }
.step:nth-child(3) .step-line::before { animation-delay: 1s; }

.step-content {
  padding: 0 0 60px;
  position: relative;
}

.step-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: white;
  margin-bottom: 12px;
}

.step-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-text);
  max-width: 500px;
}

/* ── Showcase ── */
.showcase {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 120px;
}

.showcase-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  overflow: hidden;
  height: 560px;
}

.showcase-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
  z-index: 10;
  border-radius: 12px;
}

.showcase-glow {
  position: absolute;
  right: 100px;
  top: -50px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 255, 65, 0.06) 0%, transparent 70%);
}

.showcase-text {
  position: relative;
  z-index: 2;
  padding: 80px 0 0 48px;
  max-width: 480px;
}

.showcase-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  color: white;
  margin-bottom: 20px;
}

.showcase-desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-text);
}

.showcase-macbook {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 320px;
  z-index: 1;
}

.showcase-macbook img {
  width: 100%;
}

.showcase-phone {
  position: absolute;
  right: 320px;
  top: 40px;
  width: 220px;
  z-index: 3;
  animation: float 6s ease-in-out infinite;
}

/* ── Features ── */
.features {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 120px;
}

.features-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feature-card {
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  overflow: hidden;
  background: #0a0f0c;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 255, 65, 0.25);
}

.feature-card img {
  width: 100%;
  height: auto;
}

/* ── Download ── */
.download {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 120px;
}

.download-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.download-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.download-logo {
  width: 180px;
  margin-bottom: 8px;
}

.download-logo img {
  width: 100%;
}

.download-req {
  font-size: 14px;
  color: var(--gray-light);
  margin-bottom: 8px;
}

.download-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* macOS Menu Bar Mockup */
.menubar-mockup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menubar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 16px;
  background: rgba(40, 40, 40, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.menubar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menubar-apple {
  color: #ccc;
}

.menubar-app-name {
  font-family: -apple-system, BlinkMacSystemFont, 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
}

.menubar-menu-item {
  font-family: -apple-system, BlinkMacSystemFont, 'Outfit', sans-serif;
  font-size: 13px;
  color: #999;
}

.menubar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menubar-tray-item {
  color: #999;
  display: flex;
  align-items: center;
}

.menubar-drop-icon {
  color: #ccc;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 2px 6px;
}

.menubar-clock {
  font-family: -apple-system, BlinkMacSystemFont, 'Outfit', sans-serif;
  font-size: 13px;
  color: #ccc;
}

.menubar-screenshot {
  max-width: 420px;
  width: 100%;
  display: block;
  margin-top: 12px;
  align-self: flex-end;
  margin-right: 36px;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ── App Screen Mockup ── */
.app-screen {
  background: #0d1117;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Silkscreen', cursive;
  height: 100%;
}

.app-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4% 6% 1%;
  flex-shrink: 0;
}

.app-time {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(8px, 4.2%, 13px);
  font-weight: 600;
  color: #fff;
  opacity: 0.8;
}

.app-statusbar-right {
  display: flex;
  align-items: center;
  gap: 3px;
}

.app-statusbar-right svg {
  width: clamp(10px, 5.5%, 18px);
  height: auto;
}

.app-battery {
  width: clamp(14px, 7%, 22px);
  height: clamp(7px, 3.5%, 11px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  padding: 1px;
  position: relative;
}

.app-battery::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 25%;
  width: 1.5px;
  height: 50%;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0 1px 1px 0;
}

.app-battery-fill {
  width: 55%;
  height: 100%;
  background: #fff;
  opacity: 0.6;
  border-radius: 1px;
}

/* Top nav */
.app-topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5% 6% 4%;
  flex-shrink: 0;
}

.app-topnav svg,
.app-topnav-icon {
  width: 16px;
  height: auto;
}

.app-folder-select {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Silkscreen', cursive;
  font-size: clamp(9px, 5%, 15px);
  color: #aaa;
  letter-spacing: 0.5px;
}

.app-folder-select svg {
  width: clamp(8px, 4.5%, 12px);
}

/* Waveform area */
.app-waveform-area {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4%;
}

.app-waveform-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 4px rgba(0, 255, 65, 0.35)) drop-shadow(0 0 8px rgba(0, 255, 65, 0.12));
}

/* Center group: timer + record + pro pill */
.app-center-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Record button */
.app-record-btn {
  width: clamp(52px, 30%, 90px);
  aspect-ratio: 1;
  margin: 0 auto 3%;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.app-record-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.18) 0deg, rgba(255,255,255,0.18) 4deg, transparent 4deg, transparent 9deg,
    rgba(255,255,255,0.18) 9deg, rgba(255,255,255,0.18) 13deg, transparent 13deg, transparent 18deg,
    rgba(255,255,255,0.18) 18deg, rgba(255,255,255,0.18) 22deg, transparent 22deg, transparent 27deg,
    rgba(255,255,255,0.18) 27deg, rgba(255,255,255,0.18) 31deg, transparent 31deg, transparent 36deg,
    rgba(255,255,255,0.18) 36deg, rgba(255,255,255,0.18) 40deg, transparent 40deg, transparent 45deg,
    rgba(255,255,255,0.18) 45deg, rgba(255,255,255,0.18) 49deg, transparent 49deg, transparent 54deg,
    rgba(255,255,255,0.18) 54deg, rgba(255,255,255,0.18) 58deg, transparent 58deg, transparent 63deg,
    rgba(255,255,255,0.18) 63deg, rgba(255,255,255,0.18) 67deg, transparent 67deg, transparent 72deg,
    rgba(255,255,255,0.18) 72deg, rgba(255,255,255,0.18) 76deg, transparent 76deg, transparent 81deg,
    rgba(255,255,255,0.18) 81deg, rgba(255,255,255,0.18) 85deg, transparent 85deg, transparent 90deg,
    rgba(255,255,255,0.18) 90deg, rgba(255,255,255,0.18) 94deg, transparent 94deg, transparent 99deg,
    rgba(255,255,255,0.18) 99deg, rgba(255,255,255,0.18) 103deg, transparent 103deg, transparent 108deg,
    rgba(255,255,255,0.18) 108deg, rgba(255,255,255,0.18) 112deg, transparent 112deg, transparent 117deg,
    rgba(255,255,255,0.18) 117deg, rgba(255,255,255,0.18) 121deg, transparent 121deg, transparent 126deg,
    rgba(255,255,255,0.18) 126deg, rgba(255,255,255,0.18) 130deg, transparent 130deg, transparent 135deg,
    rgba(255,255,255,0.18) 135deg, rgba(255,255,255,0.18) 139deg, transparent 139deg, transparent 144deg,
    rgba(255,255,255,0.18) 144deg, rgba(255,255,255,0.18) 148deg, transparent 148deg, transparent 153deg,
    rgba(255,255,255,0.18) 153deg, rgba(255,255,255,0.18) 157deg, transparent 157deg, transparent 162deg,
    rgba(255,255,255,0.18) 162deg, rgba(255,255,255,0.18) 166deg, transparent 166deg, transparent 171deg,
    rgba(255,255,255,0.18) 171deg, rgba(255,255,255,0.18) 175deg, transparent 175deg, transparent 180deg,
    rgba(255,255,255,0.18) 180deg, rgba(255,255,255,0.18) 184deg, transparent 184deg, transparent 189deg,
    rgba(255,255,255,0.18) 189deg, rgba(255,255,255,0.18) 193deg, transparent 193deg, transparent 198deg,
    rgba(255,255,255,0.18) 198deg, rgba(255,255,255,0.18) 202deg, transparent 202deg, transparent 207deg,
    rgba(255,255,255,0.18) 207deg, rgba(255,255,255,0.18) 211deg, transparent 211deg, transparent 216deg,
    rgba(255,255,255,0.18) 216deg, rgba(255,255,255,0.18) 220deg, transparent 220deg, transparent 225deg,
    rgba(255,255,255,0.18) 225deg, rgba(255,255,255,0.18) 229deg, transparent 229deg, transparent 234deg,
    rgba(255,255,255,0.18) 234deg, rgba(255,255,255,0.18) 238deg, transparent 238deg, transparent 243deg,
    rgba(255,255,255,0.18) 243deg, rgba(255,255,255,0.18) 247deg, transparent 247deg, transparent 252deg,
    rgba(255,255,255,0.18) 252deg, rgba(255,255,255,0.18) 256deg, transparent 256deg, transparent 261deg,
    rgba(255,255,255,0.18) 261deg, rgba(255,255,255,0.18) 265deg, transparent 265deg, transparent 270deg,
    rgba(255,255,255,0.18) 270deg, rgba(255,255,255,0.18) 274deg, transparent 274deg, transparent 279deg,
    rgba(255,255,255,0.18) 279deg, rgba(255,255,255,0.18) 283deg, transparent 283deg, transparent 288deg,
    rgba(255,255,255,0.18) 288deg, rgba(255,255,255,0.18) 292deg, transparent 292deg, transparent 297deg,
    rgba(255,255,255,0.18) 297deg, rgba(255,255,255,0.18) 301deg, transparent 301deg, transparent 306deg,
    rgba(255,255,255,0.18) 306deg, rgba(255,255,255,0.18) 310deg, transparent 310deg, transparent 315deg,
    rgba(255,255,255,0.18) 315deg, rgba(255,255,255,0.18) 319deg, transparent 319deg, transparent 324deg,
    rgba(255,255,255,0.18) 324deg, rgba(255,255,255,0.18) 328deg, transparent 328deg, transparent 333deg,
    rgba(255,255,255,0.18) 333deg, rgba(255,255,255,0.18) 337deg, transparent 337deg, transparent 342deg,
    rgba(255,255,255,0.18) 342deg, rgba(255,255,255,0.18) 346deg, transparent 346deg, transparent 351deg,
    rgba(255,255,255,0.18) 351deg, rgba(255,255,255,0.18) 355deg, transparent 355deg, transparent 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 72%, black 73%);
  mask: radial-gradient(circle, transparent 72%, black 73%);
}

.app-record-btn-inner {
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #e8354d, #b01030);
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Pro pill */
.app-pro-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 3% auto 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 2% 8%;
  flex-shrink: 0;
}

.app-pro-count {
  font-family: 'Silkscreen', cursive;
  font-size: clamp(6px, 3.5%, 10px);
  color: #666;
  letter-spacing: 0.5px;
}

.app-pro-separator {
  color: #444;
  font-size: clamp(5px, 3%, 9px);
}

.app-pro-label {
  font-family: 'Silkscreen', cursive;
  font-size: clamp(6px, 3.5%, 10px);
  color: var(--neon-green);
  letter-spacing: 1px;
}

/* Bottom controls */
.app-bottom-controls {
  display: flex;
  gap: 3%;
  padding: 0 6% 3%;
  justify-content: center;
  flex-shrink: 0;
}

.app-control-btn {
  font-family: 'Silkscreen', cursive;
  font-size: clamp(6px, 3.2%, 10px);
  color: #555;
  letter-spacing: 0.8px;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 2.5% 0;
  text-align: center;
  flex: 1;
}

/* Sync bar */
.app-sync-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5% 6%;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.app-sync-bar svg {
  width: clamp(10px, 5.5%, 16px);
  height: auto;
}

.app-sync-text {
  font-family: 'Silkscreen', cursive;
  font-size: clamp(5px, 3%, 9px);
  color: #444;
  letter-spacing: 0.8px;
}

/* ── App Screen List View ── */
.app-screen-list {
  background: #0d1117;
}

.app-list-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2% 5% 3%;
  flex-shrink: 0;
}

.app-list-back {
  width: 20px;
  display: flex;
  align-items: center;
}

.app-list-back svg {
  width: clamp(7px, 4%, 12px);
  height: auto;
}

.app-list-title {
  font-family: 'Silkscreen', cursive;
  font-size: clamp(8px, 4.8%, 14px);
  color: #e0e0e0;
  letter-spacing: 1px;
}

.app-list-select-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 255, 65, 0.06);
  border: 1px solid rgba(0, 255, 65, 0.15);
  border-radius: 20px;
  padding: 2% 4% 2% 3%;
}

.app-list-select-btn svg {
  width: clamp(10px, 5.5%, 16px);
  height: auto;
}

.app-list-select-btn span {
  font-family: 'Silkscreen', cursive;
  font-size: clamp(6px, 3.5%, 10px);
  color: var(--neon-green);
  letter-spacing: 0.5px;
}

.app-recordings-list {
  flex: 1;
  overflow: hidden;
}

.app-folder-label {
  font-family: 'Silkscreen', cursive;
  font-size: clamp(6px, 3.2%, 10px);
  color: var(--neon-green);
  letter-spacing: 1px;
  padding: 4% 6% 2%;
}

.app-rec-row {
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 3% 6%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.app-play-icon {
  flex-shrink: 0;
  width: clamp(7px, 4%, 12px);
  height: auto;
}

.app-rec-row-info {
  flex: 1;
  min-width: 0;
}

.app-rec-row-name {
  display: block;
  font-family: 'Silkscreen', cursive;
  font-size: clamp(7px, 4%, 11px);
  color: #ccc;
  letter-spacing: 0.5px;
}

.app-rec-row-date {
  display: block;
  font-family: 'Silkscreen', cursive;
  font-size: clamp(5px, 2.8%, 8px);
  color: #444;
  letter-spacing: 0.3px;
  margin-top: 1px;
}

.app-rec-row-dur {
  font-family: 'Silkscreen', cursive;
  font-size: clamp(7px, 4%, 11px);
  color: #444;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* ── Footer ── */
.footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 65px 40px 40px;
  border-top: 1px solid var(--border-dark);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  margin-bottom: 24px;
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--neon-green-faint);
  border: 1px solid rgba(0, 255, 65, 0.33);
  border-radius: 4px;
  padding: 3px 10px 3px 8px;
  font-family: 'Silkscreen', cursive;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--neon-green);
}

.online-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--neon-green);
  border-radius: 50%;
  opacity: 0.45;
  box-shadow: 0 0 6px #39ff14;
  animation: pulse-dot 2s ease-in-out infinite;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Silkscreen', cursive;
  font-size: 12px;
  color: var(--gray-dark);
}

.footer-wasabi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-dark);
  transition: color 0.2s;
}

.footer-wasabi:hover {
  color: var(--neon-green);
}

.footer-wasabi-icon {
  width: 20px;
  height: auto;
}

.footer-made-by {
  height: 28px;
  width: auto;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.footer-made-by:hover {
  opacity: 0.8;
}

.footer-divider {
  border: none;
  border-top: 1px solid var(--border-dark);
  margin-bottom: 24px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-nav {
  display: flex;
  gap: 24px;
}

.footer-nav a {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--gray-light);
  transition: color 0.2s;
  position: relative;
}

.footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--neon-green);
  transition: width 0.3s ease;
}

.footer-nav a:hover {
  color: var(--neon-green);
}

.footer-nav a:hover::after {
  width: 100%;
}

.footer-credit {
  font-size: 13px;
  color: var(--gray-light);
}

/* ── FAQ ── */
.faq {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px 120px;
}

.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--border-dark);
}

.faq-item:first-child {
  border-top: 1px solid var(--border-dark);
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: #e0e0e0;
  transition: color 0.2s;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--neon-green);
}

.faq-prompt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--neon-green);
  opacity: 0.5;
  flex-shrink: 0;
}

.faq-chevron {
  margin-left: auto;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  position: relative;
}

.faq-chevron::before {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--gray-dark);
  transition: transform 0.3s ease, color 0.3s;
  display: block;
}

.faq-item[open] .faq-chevron::before {
  content: '−';
  color: var(--neon-green);
}

.faq-answer {
  padding: 0 0 24px 28px;
  animation: faqReveal 0.3s ease;
}

.faq-answer p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-text);
  max-width: 680px;
}

@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── What's Next ── */
.whats-next {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

.next-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.next-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-dark);
}

.next-item:first-child {
  border-top: 1px solid var(--border-dark);
}

.next-prompt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--neon-green);
  opacity: 0.5;
  flex-shrink: 0;
  padding-top: 2px;
}

.next-text {
  flex: 1;
  min-width: 0;
}

.next-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: #e0e0e0;
  margin: 0 0 6px 0;
}

.next-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-text);
  margin: 0;
}

.next-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--gray-light);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  padding-top: 4px;
}

.next-status-active {
  color: var(--neon-green);
}

@media (max-width: 768px) {
  .next-item {
    flex-wrap: wrap;
  }
  .next-status {
    width: 100%;
    padding-left: 24px;
    padding-top: 4px;
  }
}

/* ── EQ Bars Decoration ── */
.eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
}

.eq-bars .bar {
  width: 3px;
  background: var(--neon-green);
  border-radius: 1px;
  opacity: 0.25;
}

.eq-bars .bar:nth-child(1) { animation: eqBar1 1.2s ease-in-out infinite; }
.eq-bars .bar:nth-child(2) { animation: eqBar2 0.9s ease-in-out infinite 0.1s; }
.eq-bars .bar:nth-child(3) { animation: eqBar3 1.1s ease-in-out infinite 0.2s; }
.eq-bars .bar:nth-child(4) { animation: eqBar4 0.8s ease-in-out infinite 0.15s; }
.eq-bars .bar:nth-child(5) { animation: eqBar5 1.0s ease-in-out infinite 0.05s; }

.how-it-works .eq-decoration {
  position: absolute;
  right: 0;
  top: 12px;
  opacity: 0.4;
}

/* ── Animations ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 6px #39ff14; }
  50% { opacity: 0.9; box-shadow: 0 0 12px #39ff14, 0 0 20px rgba(57, 255, 20, 0.3); }
}

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

@keyframes floatIn {
  from { opacity: 0; transform: translateY(10px) translateX(30px); }
  to { opacity: 1; transform: translateY(0) translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }

/* ── Phone Screenshot ── */
.phone-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
  display: block;
}

/* ── Language Switcher ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.lang-active {
  color: var(--neon-green);
  font-weight: 500;
}

.lang-sep {
  color: var(--gray-dark);
  font-size: 9px;
  user-select: none;
}

.lang-option {
  color: var(--gray-light);
  transition: color 0.2s, text-shadow 0.2s;
  text-decoration: none;
}

.lang-option:hover {
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

.nav-mobile-menu .lang-switcher {
  gap: 12px;
}

.nav-mobile-menu .lang-switcher .lang-active {
  font-size: 18px;
}

.nav-mobile-menu .lang-switcher .lang-sep {
  font-size: 12px;
}

.nav-mobile-menu .lang-switcher .lang-option {
  font-size: 18px;
}

/* ── Support ── */
.support {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px 120px;
}

.support-content {
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  padding: 40px 0;
}

.support-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-text);
  max-width: 600px;
  margin-bottom: 24px;
}

.support-text a {
  color: var(--neon-green);
  opacity: 0.8;
  transition: opacity 0.2s;
}

.support-text a:hover {
  opacity: 1;
}

.support-email {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--neon-green);
  letter-spacing: 0.5px;
  transition: text-shadow 0.2s, opacity 0.2s;
  opacity: 0.8;
}

.support-email:hover {
  opacity: 1;
  text-shadow: 0 0 12px rgba(0, 255, 65, 0.4);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero {
    padding: 140px 40px 60px;
    text-align: center;
  }

  .hero-inner {
    flex-direction: column;
    align-items: center;
  }

  .hero-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-desc {
    max-width: 520px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-device {
    width: 220px;
    margin-left: 0;
    margin-top: 60px;
    animation: fadeUp 1s ease 0.5s both;
  }

  .showcase-panel {
    height: auto;
    padding-bottom: 60px;
  }

  .showcase-text {
    padding: 48px 32px 0;
  }

  .showcase-macbook {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin-top: 40px;
  }

  .showcase-phone {
    display: none;
  }

  .download-panel {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  .nav {
    padding: 16px 20px;
  }

  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .hero {
    padding: 120px 24px 40px;
  }

  .hero-tagline {
    font-size: 36px;
  }

  .hero-desc {
    font-size: 16px;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
  }

  .signal-strip {
    gap: 16px;
    padding: 16px 0;
  }

  .how-it-works {
    padding: 60px 24px 80px;
  }

  .step {
    grid-template-columns: 50px 1px 1fr;
    gap: 20px;
  }

  .step-number {
    font-size: 28px;
  }

  .showcase {
    padding: 0 24px 80px;
  }

  .features {
    padding: 0 0 80px;
  }

  .features .section-label {
    margin-left: 24px;
  }

  .features-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 24px;
    scrollbar-width: none;
  }

  .features-strip::-webkit-scrollbar {
    display: none;
  }

  .feature-card {
    flex: 0 0 72%;
    max-width: 300px;
    scroll-snap-align: center;
  }

  .feature-card:hover {
    transform: none;
  }

  .faq {
    padding: 0 24px 80px;
  }

  .faq-question {
    font-size: 15px;
  }

  .support {
    padding: 0 24px 80px;
  }

  .download {
    padding: 0 24px 80px;
  }

  .download-buttons {
    max-width: 100%;
  }

  .footer {
    padding: 40px 24px;
  }

  .footer-top {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Marquee Signal Strip ── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── EQ Bars Animation ── */
@keyframes eqBar1 { 0%, 100% { height: 4px; } 50% { height: 18px; } }
@keyframes eqBar2 { 0%, 100% { height: 10px; } 40% { height: 24px; } }
@keyframes eqBar3 { 0%, 100% { height: 6px; } 60% { height: 14px; } }
@keyframes eqBar4 { 0%, 100% { height: 12px; } 45% { height: 20px; } }
@keyframes eqBar5 { 0%, 100% { height: 8px; } 55% { height: 26px; } }

/* ── Scanlines ── */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ── Pulse dot on timeline ── */
@keyframes timeline-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--neon-green); opacity: 0.6; }
  50% { box-shadow: 0 0 12px var(--neon-green), 0 0 24px rgba(0, 255, 65, 0.3); opacity: 1; }
}

/* ── Staggered card entrance ── */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}