/* Features stage below icon row. Hero and icon row stay untouched. */
html body.home .home-marquee-sec {
  display: none !important;
}

.home .home-need-stage,
html body.home section.home-need-stage#features,
html:not([data-theme="light"]) body.home section.home-need-stage#features {
  --need-cyan: #14d4dd;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0 96px;
  background: transparent !important;
  color: #eef6f8;
}
html body.home .home-need-inner.wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.16fr) minmax(0, .92fr);
  gap: 12px 8px;
  align-items: stretch;
  box-sizing: border-box;
}

html body.home .home-need-copy h2 {
  max-width: 11ch;
  margin: 0 0 18px;
  font-size: clamp(40px, 4.5vw, 56px) !important;
  font-weight: 760;
  letter-spacing: -.05em;
  line-height: 1.04;
  color: #f8fcfd;
}
.home .home-need-copy h2 em {
  font-style: normal;
  color: var(--need-cyan);
}
.home .home-need-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--need-cyan);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.home .home-need-kicker::after {
  content: "";
  width: 40px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--need-cyan), transparent);
}
.home .home-need-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.home .home-need-lead {
  max-width: 36ch;
  margin: 0 0 28px;
  color: #b7c9cf;
  font-size: 16px;
  line-height: 1.65;
}
.home .home-need-points {
  display: grid;
  gap: 22px;
  margin: auto 0 0;
  padding: 28px 0 0;
  list-style: none;
}
.home .home-need-points li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.home .home-need-points li::before {
  content: "";
  width: 22px;
  height: 2px;
  margin-top: 11px;
  background: var(--need-cyan);
  box-shadow: 0 0 10px rgba(20, 212, 221, .5);
}
.home .home-need-points strong {
  display: block;
  margin-bottom: 5px;
  color: #f5fbfc;
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -.02em;
}
.home .home-need-points p {
  margin: 0;
  max-width: 38ch;
  color: #9aafb6;
  font-size: 15px;
  line-height: 1.55;
}

.home .home-need-media {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: 560px;
  height: auto;
  margin: 0 -120px 0 -120px;
  pointer-events: none;
  perspective: 1100px;
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 8%, #000 16%, #000 76%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 8%, #000 16%, #000 76%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.home .home-need-stack {
  position: absolute;
  inset: 2% -10% 2% 2%;
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(-1deg) scale(1.08);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.home .home-need-card {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #081218;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55), 0 0 24px rgba(20, 212, 221, .16);
  backface-visibility: hidden;
}
.home .home-need-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  padding: 1.5px;
  box-sizing: border-box;
  border-radius: 8px;
}
.home .home-need-card::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0 64%,
    rgba(20, 212, 221, .1) 72%,
    #14d4dd 79%,
    #e7ffff 82%,
    rgba(20, 212, 221, .12) 87%,
    transparent 93% 100%
  );
  animation: needBorder 6.4s linear infinite;
}
.home .home-need-card::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 2;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(20, 212, 221, .28);
  pointer-events: none;
}

/* Two-column 3D monitor wall — screens stay parallel, no fan. */
.home .home-need-card.is-city {
  width: 44%;
  height: 30%;
  left: 2%;
  top: 8%;
  z-index: 4;
  transform: translateZ(64px);
}
.home .home-need-card.is-city img { object-position: 42% 40%; }
.home .home-need-card.is-mountain {
  width: 52%;
  height: 37%;
  left: 52%;
  top: 4%;
  z-index: 3;
  transform: translateZ(8px);
}
.home .home-need-card.is-mountain::before { animation-delay: -1.5s; }
.home .home-need-card.is-lofi {
  width: 56%;
  height: 36%;
  left: -10%;
  top: 26%;
  z-index: 7;
  transform: translateZ(88px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}
.home .home-need-card.is-lofi img { object-position: 38% 46%; }
.home .home-need-card.is-forest {
  width: 38%;
  height: 30%;
  left: 40%;
  top: 34%;
  z-index: 6;
  transform: translateZ(48px);
}
.home .home-need-card.is-forest img { object-position: 48% 55%; }
.home .home-need-card.is-forest::before { animation-delay: -2.2s; }
.home .home-need-card.is-skyline {
  width: 44%;
  height: 30%;
  left: -2%;
  top: 56%;
  z-index: 5;
  transform: translateZ(52px);
}
.home .home-need-card.is-skyline img { object-position: 50% 70%; }
.home .home-need-card.is-skyline::before { animation-delay: -3s; }
.home .home-need-card.is-coast {
  width: 50%;
  height: 33%;
  left: 52%;
  top: 54%;
  z-index: 4;
  transform: translateZ(4px);
}
.home .home-need-card.is-coast::before { animation-delay: -4.5s; }

.home .home-need-benefits {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 40px 0 0 28px;
  list-style: none;
}
.home .home-need-benefits::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50px;
  bottom: 18px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(20, 212, 221, .85), rgba(20, 212, 221, .12));
}
.home .home-need-benefits li {
  position: relative;
  padding: 0;
}
.home .home-need-benefits li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--need-cyan);
  box-shadow: 0 0 0 5px rgba(20, 212, 221, .14), 0 0 14px rgba(20, 212, 221, .45);
}
.home .home-need-benefits strong {
  display: block;
  color: #f6fcfd;
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -.02em;
}
.home .home-need-benefits p {
  margin: 6px 0 0;
  color: #9aafb6;
  font-size: 15px;
  line-height: 1.5;
}

@keyframes needBorder {
  to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
  .home .home-need-stage,
  html body.home section.home-need-stage#features {
    overflow: hidden;
  }
  html body.home .home-need-inner.wrap {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-left: 0;
    padding-right: 0;
  }
  .home .home-need-copy {
    min-height: 0;
  }
  .home .home-need-points {
    margin: 12px 0 0;
    padding-top: 0;
  }
  .home .home-need-media {
    height: 380px !important;
    min-height: 380px !important;
    max-width: none;
    width: 100%;
    margin: 8px 0 !important;
    perspective: none !important;
    overflow: hidden;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .home .home-need-stack {
    inset: 0 !important;
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
  }
  .home .home-need-card {
    transform: none !important;
    backface-visibility: visible;
  }
  .home .home-need-card.is-city { left: 0; top: 0; width: 48%; height: 32%; }
  .home .home-need-card.is-mountain { left: 52%; top: 0; width: 48%; height: 32%; }
  .home .home-need-card.is-lofi { left: 6%; top: 26%; width: 52%; height: 38%; z-index: 7; }
  .home .home-need-card.is-forest { left: 46%; top: 30%; width: 46%; height: 34%; }
  .home .home-need-card.is-skyline { left: 0; top: 66%; width: 48%; height: 34%; }
  .home .home-need-card.is-coast { left: 52%; top: 66%; width: 48%; height: 34%; }
  .home .home-need-copy,
  .home .home-need-benefits {
    display: block;
  }
  .home .home-need-points { margin-top: 0; padding-top: 0; }
  .home .home-need-benefits { padding: 8px 0 0 28px; }
  .home .home-need-copy,
  .home .home-need-benefits {
    position: relative;
    z-index: 3;
    background: transparent;
  }
  html body.home .home-need-copy h2 { max-width: none !important; }
  .home .home-need-lead { max-width: none; }
}
@media (max-width: 860px) {
  .home .home-need-stage { padding: 20px 0 16px; }
  html body.home .home-need-inner.wrap {
    padding-left: 0;
    padding-right: 0;
    gap: 18px;
  }
  html body.home .home-need-copy h2 { font-size: clamp(32px, 8vw, 42px) !important; }
  .home .home-need-media {
    height: 300px !important;
    min-height: 300px !important;
  }
  .home .home-need-points strong,
  .home .home-need-benefits strong { font-size: 16px; }
  .home .home-need-lead,
  .home .home-need-points p,
  .home .home-need-benefits p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .home-need-card::before { animation: none; }
}

html[data-theme="light"] .home .home-need-stage {
  background: transparent !important;
  color: #142026;
}
html[data-theme="light"] .home .home-need-copy h2,
html[data-theme="light"] .home .home-need-points strong,
html[data-theme="light"] .home .home-need-benefits strong {
  color: #142026;
}
html[data-theme="light"] .home .home-need-lead,
html[data-theme="light"] .home .home-need-points p,
html[data-theme="light"] .home .home-need-benefits p {
  color: #53666f;
}