:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --blue: #0071e3;
  --surface: #f5f5f7;
  --orange: #FF9900
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px
}

body {
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}

.navbar {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #ddd
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: -.04em
}

.nav-link {
  color: var(--ink)
}

.hero {
  height: 690px;
  color: #fff;
  position: relative;
  overflow: hidden
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {
  position: absolute;
  inset: 0;
  height: 100%
}

.hero .carousel-item {
  background-position: center;
  background-size: cover
}

.hero .carousel-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .18))
}

.hero-content {
  min-height: 690px;
  position: relative;
  z-index: 2
}

.hero h1 {
  font-size: clamp(3rem, 7vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: .98
}

.hero .lead {
  font-size: clamp(1.2rem, 2.2vw, 1.65rem)
}

.btn-primary {
  background: var(--blue);
  border-color: var(--blue)
}

.btn,
.form-control {
  border-radius: 980px;
  padding: .68rem 1.25rem
}

section {
  padding: 7.5rem 0
}

.section-kicker {
  color: var(--blue);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase
}

.section-title {
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.04
}

.demo .container .section-title {
  color: var(--surface)
}

.review-card,
.feature-card {
  border: 1px solid #e5e5e7;
  border-radius: 24px;
  height: 100%;
  padding: 2rem;
  transition: .25s
}

.review-card{
  background-color: #FFFFFF
}

.review-card:hover,
.feature-card:hover {
  box-shadow: 0 14px 34px #00000016;
  transform: translateY(-4px)
}

.feature-icon {
  font-size: 2.5rem
}

.demo {
  background: var(--ink)
}

.request {
  background: var(--surface)
}

.firmwares {
  background: var(--surface)
}

.video-frame {
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px #0003
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0
}

.request-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 32px #00000012;
  padding: clamp(1.5rem, 4vw, 3rem)
}

.install-list {
  counter-reset: steps;
  list-style: none;
  padding: 0
}

.install-list li {
  border-bottom: 1px solid #e5e5e7;
  counter-increment: steps;
  padding: 1.2rem 0 1.2rem 4rem;
  position: relative
}

.install-list li:before {
  color: var(--blue);
  content: counter(steps, decimal-leading-zero);
  font-weight: 700;
  left: 0;
  position: absolute
}

.reviews {
  background: var(--surface)
}

.comingSoon-list,
.firmwares-list {
  padding: 0;
}

.comingSoon-list li,
.firmwares-list li {
  border-bottom: 1px solid #e5e5e7;
  padding: 0.5rem 0 0.5rem 1rem;
  position: relative;
  list-style-type: disc
}

.firmwares-list li::marker{
  font-size: 2em;
  color: var(--blue)
}

.comingSoon-list li::marker{
  font-size: 2em;
  color: var(--orange)
}

.accordion-item {
  border: 0;
  border-bottom: 1px solid #d2d2d7
}

.accordion-button {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 1.35rem 0
}

.accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--ink)
}

.accordion-body {
  color: var(--muted);
  padding: 0 2.8rem 1.35rem 0
}

@media(max-width:576px) {

  .hero,
  .hero-content {
    min-height: 590px;
    height: 590px
  }

  section {
    padding: 5rem 0
  }
}