@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #000000;
  --surface: #0c0d11;
  --surface-2: #13151b;
  --surface-3: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.56);
  --text-faint: rgba(255, 255, 255, 0.34);
  --accent: #4d2ff5;
  --accent-hover: #6b4fff;
  --accent-light: rgba(77, 47, 245, 0.14);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Display',
    'Segoe UI',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

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

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* A 3-column grid (rather than flex space-between) keeps the center nav
     links group truly centered on the viewport regardless of how wide the
     brand on the left vs. the CTA button on the right are — space-between
     only balances the gaps, not the optical center, so it visibly drifts
     toward whichever side is narrower. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 28px;
  background: rgba(0, 0, 0, 0.82);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.nav.scrolled {
  border-bottom-color: var(--border);
}
.nav__brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}
.nav__logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}
.nav__links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  color: var(--text-dim);
}
.nav__links a:hover {
  color: var(--text);
}
@media (max-width: 759px) {
  .nav__links {
    display: none;
  }
}
.nav__cta {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
}
.nav__cta-short {
  display: none;
}
@media (max-width: 480px) {
  .nav {
    padding: 14px 18px;
  }
  .nav__cta-full {
    display: none;
  }
  .nav__cta-short {
    display: inline;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition:
    transform 0.15s var(--ease),
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--surface-3);
}
.btn-sm {
  padding: 9px 15px;
  font-size: 13px;
}

/* ---------- hero ---------- */
.hero {
  padding: 110px 28px 60px;
  text-align: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.hero h1 {
  font-size: clamp(32px, 6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 22px;
}
.hero h1 span {
  color: var(--accent);
}
/* The <br> gives a deliberate two-line split at comfortable widths, but on
   narrow screens each half is still too long to fit its own line, so the
   forced break just creates an extra, more awkward wrap on top of it.
   Dropping it lets the whole heading reflow naturally instead. */
@media (max-width: 640px) {
  .hero__br {
    display: none;
  }
}
.hero p {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto 36px;
}
.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hero__meta {
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---------- mockup ---------- */
.mockup-frame {
  margin: 64px auto 0;
  max-width: 900px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #0a0a0d, #000);
  padding: 28px;
  box-shadow: 0 40px 120px -40px rgba(77, 47, 245, 0.35);
}
.mockup {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.mockup__sidebar {
  width: 340px;
  flex-shrink: 0;
  padding: 18px;
  border-right: 1px solid var(--border);
}
.mockup__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 16px;
}
.mockup__dot {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--accent);
}
.mockup__tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-3);
  padding: 3px;
  border-radius: 7px;
  margin-bottom: 12px;
}
.mockup__tab {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 5px;
  color: var(--text-faint);
}
.mockup__tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}
.mockup__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.mockup__card {
  height: 50px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1a1c24, #0a0a0d);
  border: 1.5px solid transparent;
}
.mockup__card.selected {
  border-color: var(--accent);
}
.mockup__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-dim);
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.mockup__sw {
  width: 24px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent);
  position: relative;
}
.mockup__sw::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.mockup__sw.off {
  background: var(--surface-3);
}
.mockup__sw.off::after {
  right: auto;
  left: 2px;
}
.mockup__quality {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mockup__qopt {
  font-size: 9.5px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  color: var(--text-faint);
}
.mockup__qopt.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--text);
  font-weight: 600;
}
.mockup__start {
  margin-top: 12px;
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 9px;
  border-radius: 7px;
}
.mockup__stage {
  flex: 1;
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, #2a2440, transparent 55%),
    radial-gradient(circle at 70% 80%, #1a2740, transparent 55%), #07070a;
  min-height: 320px;
}
.mockup__pill {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 16, 21, 0.92);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 10px;
  font-weight: 600;
}
.mockup__rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
}
.mockup__bubble {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d2050, #0c0d11);
  border: 2px solid rgba(255, 255, 255, 0.14);
}

/* ---------- features ---------- */
.section {
  padding: 90px 28px;
}
.section__head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
}
.section__eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section__head h2 {
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.section__head p {
  color: var(--text-dim);
  font-size: 16px;
  margin: 0;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 880px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .features {
    grid-template-columns: 1fr;
  }
}
.feature {
  background: var(--bg);
  padding: 32px 28px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.feature.in-view {
  opacity: 1;
  transform: none;
}
.feature__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 18px;
}
.feature h3 {
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.feature p {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
}

/* ---------- cta band ---------- */
.cta-band {
  text-align: center;
  padding: 100px 28px;
  border-top: 1px solid var(--border);
}
.cta-band h2 {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.cta-band p {
  color: var(--text-dim);
  margin: 0 0 32px;
}

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 36px 28px;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dim);
}
.footer__logo {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  opacity: 0.8;
}
.footer__links {
  display: flex;
  gap: 22px;
  font-size: 13.5px;
  color: var(--text-faint);
}
.footer__links a:hover {
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .mockup {
    flex-direction: column;
  }
  .mockup__sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .nav__links {
    gap: 18px;
  }
  .hero {
    padding-top: 90px;
  }
  .section,
  .cta-band {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 20px;
  }
  .hero {
    padding: 84px 20px 48px;
  }
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__ctas .btn {
    justify-content: center;
  }
  .mockup-frame {
    margin-top: 44px;
    padding: 12px;
    border-radius: var(--radius);
  }
  .mockup__stage {
    min-height: 220px;
  }
  .section,
  .cta-band {
    padding: 56px 20px;
  }
  .section__head {
    margin-bottom: 40px;
  }
  .footer {
    padding: 28px 20px;
  }
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}