.landing-page {
  background:
    #f1f1ee;
}

.landing-nav {
  width:
    100%;

  min-height:
    82px;

  padding:
    0 42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}

.landing-logo {
  font-size:
    21px;

  font-weight:
    950;

  letter-spacing:
    -0.06em;
}

.landing-account-button {
  min-width:
    80px;

  min-height:
    40px;

  padding:
    0 18px;

  border:
    1px solid var(--line-dark);

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    13px;

  font-weight:
    800;
}

.hero {
  min-height:
    650px;

  padding:
    110px 24px 120px;

  display:
    flex;

  align-items:
    center;
}

.hero-inner {
  width:
    min(
      100%,
      1180px
    );

  margin:
    0 auto;
}

.hero-brand {
  margin-bottom:
    32px;

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    0.16em;
}

.hero h1 {
  margin:
    0;

  max-width:
    1100px;

  font-size:
    clamp(
      72px,
      13vw,
      180px
    );

  line-height:
    0.78;

  font-weight:
    950;

  letter-spacing:
    -0.085em;
}

.hero-description {
  max-width:
    600px;

  margin:
    54px 0 0;

  color:
    var(--text-soft);

  font-size:
    18px;

  line-height:
    1.65;
}

.product-showcase {
  width:
    min(
      calc(100% - 48px),
      1180px
    );

  margin:
    0 auto;

  padding:
    60px 0 130px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(260px, 0.7fr);

  align-items:
    end;

  gap:
    28px;
}

.product-window {
  overflow:
    hidden;

  border:
    1px solid #292929;

  border-radius:
    9px;

  background:
    #151515;

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, 0.16);
}

.product-window-large {
  transform:
    rotate(-1deg);
}

.product-window-small {
  margin-bottom:
    -56px;

  transform:
    rotate(2deg);
}

.product-window-bar {
  height:
    38px;

  padding:
    0 13px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);

  background:
    #202020;

  color:
    #858585;
}

.product-window-bar > span {
  width:
    8px;

  height:
    8px;

  border-radius:
    100%;

  background:
    #4b4b4b;
}

.product-window-title {
  margin-left:
    auto;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}

.product-window-content {
  min-height:
    460px;

  padding:
    38px;

  background:
    linear-gradient(
      145deg,
      #d5d5d0,
      #9d9d98
    );

  position:
    relative;
}

.product-window-small
.product-window-content {
  min-height:
    355px;
}

.mock-panel-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  color:
    #161616;

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    0.1em;
}

.mock-status {
  padding:
    7px 10px;

  border:
    1px solid
    rgba(0, 0, 0, 0.25);

  border-radius:
    999px;

  font-size:
    9px;
}

.mock-device {
  height:
    280px;

  margin-top:
    36px;

  border:
    1px solid
    rgba(0, 0, 0, 0.25);

  border-radius:
    8px;

  background:
    linear-gradient(
      145deg,
      #c1c1bc,
      #e2e2dd
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;
}

.mock-device-label {
  margin-bottom:
    23px;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.14em;
}

.mock-knob {
  width:
    120px;

  height:
    120px;

  border-radius:
    100%;

  background:
    radial-gradient(
      circle at 38% 30%,
      #50504d,
      #111 64%
    );

  box-shadow:
    0 12px 20px
    rgba(0, 0, 0, 0.28);

  position:
    relative;
}

.mock-knob-line {
  width:
    3px;

  height:
    37px;

  border-radius:
    3px;

  background:
    #e9e9e4;

  position:
    absolute;

  top:
    13px;

  left:
    50%;

  transform:
    translateX(-50%);
}

.mock-db {
  margin-top:
    19px;

  font-size:
    12px;

  font-weight:
    800;
}

.mock-room {
  margin-top:
    17px;

  padding:
    15px 18px;

  border:
    1px solid
    rgba(0, 0, 0, 0.24);

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}

.mock-room-label {
  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    0.13em;
}

.mock-room strong {
  font-size:
    16px;

  letter-spacing:
    0.14em;
}

.standalone-preview {
  display:
    flex;

  flex-direction:
    column;
}

.standalone-meter {
  width:
    42px;

  flex:
    1;

  min-height:
    205px;

  margin:
    34px auto;

  padding:
    5px;

  border:
    1px solid
    rgba(0, 0, 0, 0.24);

  border-radius:
    6px;

  display:
    flex;

  align-items:
    flex-end;
}

.standalone-meter-fill {
  width:
    100%;

  height:
    66%;

  border-radius:
    3px;

  background:
    #171717;
}

.standalone-controls {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    7px;
}

.standalone-controls div {
  padding:
    11px 6px;

  border:
    1px solid
    rgba(0, 0, 0, 0.22);

  border-radius:
    5px;

  text-align:
    center;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}

.features {
  width:
    min(
      calc(100% - 48px),
      1180px
    );

  margin:
    0 auto;

  padding:
    120px 0 140px;

  border-top:
    1px solid var(--line);
}

.features-heading {
  margin-bottom:
    90px;
}

.section-kicker {
  margin-bottom:
    20px;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.16em;
}

.features-heading h2,
.landing-cta h2 {
  margin:
    0;

  max-width:
    900px;

  font-size:
    clamp(
      48px,
      7vw,
      96px
    );

  line-height:
    0.94;

  letter-spacing:
    -0.07em;

  font-weight:
    900;
}

.feature-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  border-top:
    1px solid var(--line);
}

.feature {
  min-height:
    280px;

  padding:
    36px 42px 42px 0;

  border-bottom:
    1px solid var(--line);
}

.feature:nth-child(odd) {
  padding-right:
    60px;

  border-right:
    1px solid var(--line);
}

.feature:nth-child(even) {
  padding-left:
    60px;
}

.feature-number {
  margin-bottom:
    60px;

  color:
    #8b8b86;

  font-size:
    11px;

  font-weight:
    800;
}

.feature h3 {
  margin:
    0 0 15px;

  font-size:
    clamp(
      28px,
      3vw,
      39px
    );

  line-height:
    1;

  letter-spacing:
    -0.05em;
}

.feature p {
  max-width:
    440px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    16px;

  line-height:
    1.6;
}

.landing-cta {
  width:
    min(
      calc(100% - 48px),
      1180px
    );

  margin:
    0 auto;

  padding:
    120px 0;

  border-top:
    1px solid var(--line);

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;
}

.landing-cta-button {
  min-width:
    170px;

  min-height:
    58px;

  padding:
    0 28px;

  border-radius:
    999px;

  background:
    #000;

  color:
    #fff;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    15px;

  font-weight:
    800;
}

.landing-footer {
  width:
    min(
      calc(100% - 48px),
      1180px
    );

  min-height:
    160px;

  margin:
    0 auto;

  padding:
    38px 0;

  border-top:
    1px solid var(--line);

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    end;

  gap:
    30px;
}

.landing-footer-logo {
  font-size:
    18px;

  font-weight:
    950;

  letter-spacing:
    -0.06em;
}

.landing-footer-links {
  display:
    flex;

  gap:
    24px;

  color:
    var(--text-soft);

  font-size:
    13px;
}

.landing-copyright {
  color:
    var(--text-soft);

  font-size:
    12px;

  text-align:
    right;
}

@media (
  max-width: 850px
) {
  .landing-nav {
    padding:
      0 24px;
  }

  .hero {
    min-height:
      auto;

    padding-top:
      100px;
  }

  .product-showcase {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }

  .product-window-small {
    width:
      min(
        100%,
        500px
      );

    margin:
      0 0 0 auto;
  }

  .feature-grid {
    grid-template-columns:
      1fr;
  }

  .feature:nth-child(odd),
  .feature:nth-child(even) {
    padding:
      35px 0;

    border-right:
      0;
  }

  .landing-cta {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .landing-footer {
    grid-template-columns:
      1fr;

    align-items:
      start;
  }

  .landing-copyright {
    text-align:
      left;
  }
}

@media (
  max-width: 540px
) {
  .hero h1 {
    font-size:
      clamp(
        58px,
        20vw,
        92px
      );
  }

  .hero-description {
    margin-top:
      40px;
  }

  .product-window-content {
    padding:
      24px;
  }

  .features,
  .landing-cta,
  .landing-footer,
  .product-showcase {
    width:
      calc(100% - 30px);
  }
}