:root {
  --ink: #101318;
  --muted: #626975;
  --line: #d3d6d9;
  --paper: #f1f2f2;
  --white: #fff;
  --blue: #9cb9dc;
  --violet: #748da9;
  --lime: #75c594;
  --shadow: 0 35px 95px rgba(0, 0, 0, 0.34);
}
body {
  color: var(--ink);
  background: var(--paper);
}
.nav {
  border-color: rgba(16, 19, 24, 0.12);
  background: rgba(247, 247, 245, 0.93);
}
.wordmark {
  gap: 3px;
  align-items: center;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.17em;
}
.wordmark span,
.wordmark span:last-child {
  color: var(--ink);
}
.wordmark b {
  color: #7b8796;
  font-size: 18px;
  font-weight: 350;
}
.wordmark i {
  display: none;
}
.wordmark.inverse span {
  color: #fff;
}
.button {
  border-color: #eef1f4;
  color: #0e1217;
  background: #eef1f4;
}
.button:hover {
  color: #0e1217;
  background: #fff;
}
.button.small {
  color: #fff;
  border-color: #171b22;
  background: #171b22;
}
.hero {
  color: #fff;
  background:
    radial-gradient(
      circle at 72% 42%,
      rgba(87, 119, 158, 0.19),
      transparent 27%
    ),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    #090c11;
  background-size:
    auto,
    72px 72px,
    72px 72px,
    auto;
}
.hero::before {
  color: rgba(255, 255, 255, 0.018);
  content: "RemoteFix";
}
.hero::after {
  background: #7898be;
  opacity: 0.13;
}
.hero h1 em {
  display: block;
  color: #a9c4e4;
}
.kicker span {
  background: #9cb9dc;
}
.hero-copy > p {
  color: #b1b8c1;
}
.hero-note {
  color: #929aa5;
}
.button.secondary {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.product-window {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    20px 24px 0 rgba(117, 145, 177, 0.12),
    var(--shadow);
}
.window-top {
  color: #6c727b;
  background: #e8e9e8;
}
.window-body {
  position: relative;
  background: url("assets/hero-remotefix-v5.png") center/cover;
}
.window-body::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 9, 13, 0.84), rgba(6, 9, 13, 0.3));
  content: "";
}
.window-body > aside,
.window-body > .dashboard {
  position: relative;
  z-index: 1;
}
.window-body > aside {
  background: rgba(9, 12, 17, 0.76);
  backdrop-filter: blur(16px);
}
.window-body > aside strong,
.dash-title button {
  background: #90add0;
}
.dashboard {
  color: #fff;
  background: transparent;
}
.dash-title small,
.dash-grid article > small {
  color: #abb5c3;
}
.dash-grid article {
  border-color: rgba(255, 255, 255, 0.17);
  background: rgba(7, 10, 14, 0.56);
  backdrop-filter: blur(15px);
}
.dash-grid article > span,
.activity li small,
.activity time {
  color: #aeb6c0;
}
.health span {
  color: #d0d5dc;
  background: rgba(255, 255, 255, 0.08);
}
.activity li {
  border-color: rgba(255, 255, 255, 0.12);
}
.trust {
  background: #f7f7f5;
}
.metrics {
  background: #e7e9e9;
}
.section-title > span,
.label,
.panel-actions a {
  color: #56779c;
}
.solution-tabs button.active::after {
  background: #6888ae;
}
.solution-panel {
  border-color: #cfd2d4;
  background: #fff;
  box-shadow: 14px 14px 0 #dfe1e1;
}
.panel-copy li::before {
  color: #6488b2;
}
.smart-demo,
.infra-demo,
.osd-demo {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #10151d;
}
.room-grid article:nth-child(2),
.room-grid article:nth-child(3) {
  border-top-color: #8cacca;
}
.infra-chart path {
  stroke: #9ab9dd;
}
.osd-device.active {
  border-color: #91b0d2;
  background: rgba(105, 139, 178, 0.18);
}
.osd-device.active > i {
  background: #6f91b9;
}
.living-showcase {
  background: #080b10;
}
.showcase-head span,
.endpoint-heading > span {
  color: #9cb9dc;
}
.scene-tabs button:hover,
.scene-tabs button.active {
  border-color: #8ba9cb;
  background: rgba(111, 145, 185, 0.16);
}
.scene-tabs button > i,
.scene-intro small,
.energy-layout small,
.now-playing > small,
.command-copy small {
  color: #a2bddc;
}
.scene-screen {
  box-shadow: 18px 18px 0 rgba(111, 145, 185, 0.13);
}
.scene-overview {
  background-image: url("assets/smart-living-v5.png");
}
.scene-facts span {
  background: rgba(7, 10, 14, 0.62);
}
.scene-dock span.active {
  color: #a7c1df;
}
.energy-ring {
  border-top-color: #91b0d1;
  border-right-color: #91b0d1;
}
.energy-graph path {
  stroke: #a2c0df;
  filter: drop-shadow(0 0 8px rgba(122, 158, 199, 0.45));
}
.energy-sources i {
  background: #9ab8d8;
}
.album-art {
  background:
    radial-gradient(circle at 68% 28%, #9bbbdc, transparent 30%),
    radial-gradient(circle at 30% 75%, #445970, transparent 35%), #11151b;
  box-shadow: 18px 18px 0 rgba(111, 145, 185, 0.18);
}
.album-art > span span {
  color: #a8c3df;
}
.waveform i,
.player button.play {
  border-color: #9bb8d8;
  background: #9bb8d8;
}
.command-grid article > i {
  color: #a9c3df;
  border-color: rgba(148, 181, 216, 0.45);
}
.endpoint-products {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 150px;
  color: #fff;
  background: #0b0e13;
}
.endpoint-products::before {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: 720px;
  background: url("assets/endpoint-lab-v5.png") center/cover;
  content: "";
}
.endpoint-products::after {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 760px;
  background:
    linear-gradient(
      90deg,
      rgba(6, 9, 13, 0.94) 0%,
      rgba(6, 9, 13, 0.62) 50%,
      rgba(6, 9, 13, 0.22)
    ),
    linear-gradient(0deg, #0b0e13 0%, transparent 46%);
  content: "";
}
.endpoint-heading {
  min-height: 430px;
  align-content: start;
}
.endpoint-heading h2 {
  max-width: 760px;
  text-shadow: 0 3px 25px rgba(0, 0, 0, 0.45);
}
.endpoint-heading > p {
  max-width: 370px;
  color: #c0c6ce;
}
.endpoint-catalog {
  position: relative;
  z-index: 2;
  margin-top: 25px;
  color: var(--ink);
}
.endpoint-catalog article {
  border-color: #313740;
  background: #f7f7f5;
}
.endpoint-catalog article > small,
.endpoint-main li::before,
.endpoint-main a {
  color: #547ba6;
}
.endpoint-main ul {
  background: #d7dadc;
}
.endpoint-main li {
  background: #f7f7f5;
}
.endpoint-services {
  color: #fff;
  border-color: #303640;
}
.endpoint-services article {
  border-color: #303640;
  background: #141920;
}
.endpoint-services i {
  color: #a4c0df;
  border-color: #3b424c;
}
.endpoint-services p {
  color: #929ba7;
}
.reasons {
  background: #f8f8f6;
}
.reason-list article > span {
  color: #5e82aa;
}
.cases {
  background: #090c11;
}
.cases .section-title > span,
.case-stack b {
  color: #9db9d9;
}
.case-feature {
  background:
    linear-gradient(120deg, rgba(6, 10, 15, 0.16), rgba(6, 10, 15, 0.82)),
    url("assets/hero-remotefix-v5.png") center/cover;
}
.case-stack article {
  background: #141920;
}
.pricing {
  background: #eef0f0;
}
.price-grid .featured {
  background: #12171e;
  box-shadow: 10px 10px 0 #8da9c8;
}
.price-grid .featured b {
  color: #a6c1de;
}
.location-inner {
  background: #10151c;
}
.location-map {
  background:
    linear-gradient(35deg, rgba(108, 143, 181, 0.22), transparent),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    #171e27;
  background-size:
    auto,
    34px 34px,
    34px 34px,
    auto;
}
.ring {
  border-color: rgba(150, 183, 217, 0.45);
}
.pin b {
  background: #9db9d8;
  box-shadow: 0 0 0 8px rgba(139, 173, 210, 0.18);
}
.final {
  background: #10151c;
}
.final span {
  color: #a4bfdd;
}
footer {
  background: #07090d;
}
@media (max-width: 760px) {
  .product-window {
    box-shadow: 10px 12px 0 rgba(111, 145, 185, 0.16);
  }
  .solution-panel {
    box-shadow: 7px 7px 0 #dfe1e1;
  }
  .endpoint-heading {
    min-height: 500px;
  }
  .endpoint-products::before {
    height: 650px;
    background-position: 64% center;
  }
  .endpoint-products::after {
    height: 690px;
  }
}