.device-home {
  background: var(--gradient-focal);
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100dvh; /* accounts for mobile browser chrome so the bottom bar isn't pushed off-screen */
}

/* This grows to absorb whatever vertical space the screen has to spare (so
   the layout fills exactly 100dvh with no separate empty gap floating
   between UI blocks) — the background shape simply extends further down,
   which reads as intentional, while the device+badge composition itself
   stays a fixed-height band pinned to the top via .device-home__content. */
.device-home__visual {
  position: relative;
  flex: 1;
  min-height: 300px;
  overflow: hidden;
}

.device-home__shape {
  position: absolute;
  right: -13%;
  top: 0;
  height: 100%;
  width: 70%;
  object-fit: cover;
  object-position: left center;
  opacity: 0.9;
}

.device-home__content {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
}

.device-home__hero {
  position: relative;
  z-index: 1;
  top: 60%;
  width: 65%;
  height: 159%;
  margin-left: 45%;
  object-fit: contain;
  opacity: 0;
  animation: dh-hero-in 450ms var(--ease-enter) 150ms both;
}
@keyframes dh-hero-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Circular plugin badge — uses the REAL app asset (assets/image/circalhalf.png)
   for the arc + all three connector lines (it's one diagram baked into a
   single image, not something to redraw with CSS). The icon, checkmark, and
   the two labels are overlaid at the exact anchor points measured from that
   image (513x1080 natural size): top-stub end (97.1%, 1.0%), mid-stub /
   checkmark end (93.8%, 50.2%), bottom-stub end (97.3%, 99.2%), and the
   implied circle's center for the icon (2.5%, 50%). */
.device-home__badge {
  position: absolute;
  left: 0;
  top: 110%;
  transform: translateY(-50%);
  z-index: 2;
  opacity: 0;
  animation: el-fade-in 400ms var(--ease-enter) 300ms both;
}
.device-home__badge-arcwrap {
  position: relative;
  height: 280px;
  width: 133px; /* preserves the image's native 513:1080 aspect ratio */
}
.device-home__badge-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.device-home__badge-arcwrap .plugin-icon {
  position: absolute;
  left: 2.5%;
  top: 50%;
  transform: translate(-15%, -50%);
  width: 61px;
  height: 123px;
  object-fit: contain;
}
.device-home__badge-check {
  position: absolute;
  left: 93.8%;
  top: 50.2%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  z-index: 3;
}
.device-home__badge-label {
  position: absolute;
  color: var(--color-white);
  font-size: 15px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.device-home__badge-label--top {
  left: 97.1%;
  top: 1%;
  transform: translateY(-50%);
  font-weight: 500;
}
.device-home__badge-label--bottom {
  left: 97.3%;
  top: 99.2%;
  transform: translateY(-50%);
  font-weight: 700;
}

/* Natural height, flows right after the visual — .device-home__visual
   (flex:1) is the sole element absorbing leftover space, so there is only
   ever one gap (below the device content band), not one here too. */
.device-home__systems-wrap {
  flex: 0 0 auto;
}

.device-home__systems-label {
  text-align: center;
  color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: var(--space-4) 0 var(--space-3);
  opacity: 0;
  animation: el-fade-in 400ms var(--ease-enter) 400ms both;
}

.device-home__carousel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: 4px var(--space-5) var(--space-4);
  scrollbar-width: none;
}
.device-home__carousel::-webkit-scrollbar {
  display: none;
}
.device-home__sys-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  /* Plain click-handled <div>s (not <button>/<a>), so the pointer cursor
     isn't automatic like it is for base.css's <button> reset — without
     this they look unclickable even though device-home.js wires a click
     listener on every one of them. */
  cursor: pointer;
}
.device-home__sys-item span {
  color: var(--color-white-54);
  font-size: 11px;
  font-weight: 600;
}

.device-home__bottombar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5) calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
  border-top: 1px solid var(--color-white-30);
  background: var(--color-black);
}
.device-home__bottombar span {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 600;
}