/* Clearer, more editorial compositions for the six-scene home carousel. */
.showcase-slide.banner-entering .showcase-art {
  animation: banner-art-arrive 950ms cubic-bezier(.2,.75,.25,1) both;
}

.showcase .art-pill {
  max-width: 190px;
  padding: 5px 0 5px 11px;
  white-space: normal;
  background: linear-gradient(90deg, rgba(5,22,38,.8), rgba(5,22,38,0));
  border: 0;
  border-left: 1px solid rgba(255,255,255,.45);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

.showcase .art-pill:hover {
  transform: translateY(-3px);
  border-left-color: #ffad3e;
  box-shadow: none;
}

.showcase .pill-badge {
  padding: 0;
  margin: 0 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 9px;
  line-height: 1.25;
}

.showcase .art-pill strong { font-size: 12px; }
.showcase .art-pill small { font-size: 10px; color: #d0dbe5; }

.showcase .showcase-link:not(.showcase-link-subtle) {
  padding-right: 0;
  padding-left: 0;
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}

.showcase .showcase-link:not(.showcase-link-subtle):hover {
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.repair-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: #c7d7e4;
  font: 500 10px/1.4 var(--body);
}

.repair-highlights li + li {
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.25);
}

.repair-highlights strong {
  display: block;
  color: #fff;
  font-size: 11px;
}

/* Build a fuller repair bench while keeping each device easy to read. */
.showcase .scene-store {
  background:
    radial-gradient(ellipse at 72% 47%, rgba(31, 123, 166, .28), transparent 51%),
    linear-gradient(112deg, #06182a 0%, #08253e 52%, #0c3452 100%) !important;
}

.repair-art { isolation: isolate; }

.repair-art::before {
  content: "";
  position: absolute;
  inset: 3% 0 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(76, 165, 205, .18), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(160, 213, 239, .025) 36px),
    repeating-linear-gradient(90deg, transparent 0 35px, rgba(160, 213, 239, .025) 36px);
  mask-image: radial-gradient(ellipse at center, #000 28%, transparent 76%);
}

.repair-art .repair-glow {
  left: 15%;
  top: 0;
  width: 500px;
  height: 500px;
  opacity: .68;
}

.repair-art .layer-board {
  width: 49%;
  left: 0;
  top: 3%;
  z-index: 1;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .7)) brightness(1.1) saturate(1.08);
}

.repair-art .layer-laptop {
  width: 65%;
  right: 0;
  top: 3%;
  z-index: 3;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6)) brightness(1.08);
}

.repair-art .layer-phone {
  width: 32%;
  left: 1%;
  bottom: 0;
  z-index: 5;
}

.repair-art .layer-tablet {
  width: 22%;
  left: 34%;
  top: auto;
  bottom: 0;
  z-index: 6;
  rotate: 5deg;
  animation: float-gentle-2 6.8s .35s ease-in-out infinite alternate;
}

.repair-art .layer-meter {
  width: 18%;
  left: 0;
  top: 39%;
  z-index: 4;
}

.repair-art .layer-circuit-board {
  width: 16%;
  right: 23%;
  bottom: 2%;
  z-index: 2;
  rotate: 7deg;
}

.repair-art .layer-ram {
  display: block;
  width: 16%;
  left: 59%;
  bottom: 3%;
  z-index: 4;
  rotate: -9deg;
  animation: float-gentle-3 6.3s .45s ease-in-out infinite alternate;
}

.repair-art .layer-screwdrivers {
  display: block;
  width: 21%;
  right: 0;
  bottom: 3%;
  z-index: 2;
  rotate: 7deg;
  animation: float-gentle-2 6.8s .6s ease-in-out infinite alternate;
}

.repair-art .layer-pliers { display: none; }

.store-art {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: visible;
  isolation: isolate;
}

.store-glow {
  right: 3%;
  top: 0;
  background: radial-gradient(circle, rgba(42, 178, 204, .3), rgba(245, 145, 32, .12) 55%, transparent 76%);
}

.store-orbit {
  position: absolute;
  left: 53%;
  top: 48%;
  border: 1px solid rgba(116, 207, 229, .13);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.store-orbit-one { width: 390px; height: 300px; }
.store-orbit-two { width: 315px; height: 405px; transform: translate(-50%, -50%) rotate(34deg); border-color: rgba(255, 172, 65, .1); }

.store-illustration {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, .36));
  animation: store-illustration-float 7s ease-in-out infinite;
}

@keyframes store-illustration-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

.store-pill-one { top: 7%; left: 0; }
.store-pill-two { bottom: 9%; right: 0; }

/* A camera belongs to the connectivity scene, beside the radio equipment. */
.security-art .security-shield-assembly { left: 52%; }
.security-art .security-shield-assembly {
  animation: shield-float 6.5s ease-in-out infinite;
}

@keyframes shield-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.showcase .wifi-art .wifi-antenna {
  width: 128px !important;
  left: 35% !important;
  right: auto !important;
  bottom: 4% !important;
  z-index: 4 !important;
}

.showcase .wifi-art .wifi-radio-mast {
  width: 218px !important;
  right: 0 !important;
  bottom: 1% !important;
}

.showcase .wifi-art .wifi-satellite {
  width: 78px !important;
  right: 11% !important;
  top: 2% !important;
}

.showcase .wifi-art .wifi-mesh-nodes {
  width: 205px !important;
  left: 43% !important;
  top: 1% !important;
  z-index: 3 !important;
  opacity: .96;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .48));
  animation: mesh-nodes-float 6.4s ease-in-out infinite;
}

@keyframes mesh-nodes-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

.showcase .wifi-art .wifi-cctv-camera {
  position: absolute !important;
  z-index: 5 !important;
  width: 143px !important;
  max-width: none !important;
  left: 3% !important;
  bottom: 2% !important;
  transform: translate3d(calc(var(--mouse-x) * 13px), calc(var(--mouse-y) * 10px), 0) !important;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.62)) !important;
  animation: float-gentle-1 7s .45s ease-in-out infinite alternate !important;
}

.wifi-art .pill-pos-wifi1 { top: 4% !important; left: 0 !important; }
.wifi-art .pill-pos-wifi2 { top: 27% !important; left: 0 !important; bottom: auto !important; }
.wifi-art .pill-pos-wifi3 { top: 50% !important; left: 0 !important; bottom: auto !important; }

@keyframes banner-art-arrive {
  from { opacity: 0; transform: translate3d(28px, 8px, 0) scale(.965); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes web-screen-hover {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@media (max-width: 768px) {
  /* enhancements.css declares the desktop nav later than site.css; restore the
     intended collapsed menu at phone and tablet widths. */
  .site-header { height: 72px; }
  .header-inner { position: relative; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 9px;
  }
  .menu-toggle i { display: block; width: 23px; height: 2px; background: #173b59; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 12px 20px 18px;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #e2eaf0;
    box-shadow: 0 12px 20px rgba(25,57,86,.1);
  }
  .main-nav.open { display: flex; }
  .main-nav > a:not(.nav-cta) {
    padding: 12px 3px;
    border-bottom: 1px solid #eff3f6;
    font-size: 15px;
  }
  .main-nav .nav-cta {
    justify-content: center;
    margin: 12px 0 0;
  }

  .approach-grid { grid-template-columns: minmax(0, 1fr); }
  .approach-grid > *,
  .approach-copy,
  .values-list { min-width: 0; max-width: 100%; }
  .values-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values-list > div { min-width: 0; padding: 14px; }
  .approach-visual { width: 100%; margin-right: 0; overflow: hidden; }
  .approach-stamp { right: 10px; bottom: 10px; }

  .showcase-slide,
  .showcase-inner {
    min-height: 0;
  }

  .showcase-slide {
    padding-bottom: 0;
  }

  .showcase .showcase-shade {
    background: linear-gradient(180deg, #07182a 0%, #07182af2 45%, #07182a9e 72%, #07182ae8 100%);
  }

  .showcase .scene-repair {
    background: radial-gradient(circle at 68% 72%, rgba(14,116,178,.2), transparent 56%),
      linear-gradient(160deg, #06182a, #08243d) !important;
  }

  .showcase-inner {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 0;
    padding: 25px 20px 56px;
  }

  .showcase-copy {
    width: 100%;
    max-width: none;
  }

  .showcase-kicker {
    max-width: 100%;
    gap: 7px;
    padding: 6px 9px;
    margin-bottom: 13px;
    font-size: 9px;
    letter-spacing: .11em;
    line-height: 1.4;
  }

  .showcase h1,
  .showcase h2 {
    max-width: 15ch;
    margin: 0 0 12px;
    font-size: clamp(31px, 8.2vw, 39px);
    line-height: 1.08;
    letter-spacing: -.045em;
    text-wrap: balance;
  }

  .showcase-copy p {
    max-width: 52ch;
    margin: 0 0 17px;
    font-size: 14px;
    line-height: 1.62;
  }

  .repair-highlights {
    gap: 7px 10px;
    margin-top: 10px;
    font-size: 8px;
  }

  .repair-highlights li + li { padding-left: 10px; }
  .repair-highlights strong { font-size: 10px; }

  .showcase-actions {
    gap: 8px 10px;
    margin-top: 0;
  }

  .showcase .button-orange {
    max-width: 100%;
    padding: 12px 15px;
    font-size: 13px;
    white-space: normal;
  }

  .showcase-link {
    padding: 8px 0;
    font-size: 12px;
  }

  .showcase-art {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    max-width: 100%;
    height: clamp(174px, 48vw, 198px) !important;
    margin-top: 9px;
    overflow: visible;
    perspective: none;
  }

  .showcase .art-pill { display: none; }

  .repair-art .layer-board {
    width: 43%;
    left: 4%;
    top: 5%;
  }

  .repair-art .layer-laptop {
    width: 59%;
    right: 0;
    top: 5%;
  }

  .repair-art .layer-phone {
    width: 29%;
    left: 0;
    bottom: 0;
  }

  .repair-art .layer-tablet {
    width: 20%;
    left: 37%;
    bottom: 0;
  }

  .repair-art .layer-meter {
    width: 12%;
    left: auto;
    right: 2%;
    top: auto;
    bottom: 0;
  }

  .repair-art .layer-circuit-board { display: none; }

  .repair-art .layer-ram,
  .repair-art .layer-pliers,
  .repair-art .layer-screwdrivers { display: none; }

  .store-art { height: clamp(174px, 48vw, 198px) !important; }
  .store-orbit-one { width: 230px; height: 175px; }
  .store-orbit-two { width: 180px; height: 250px; }
  .store-illustration { animation: none; }

  .server-art .server-glow-rings { transform: scale(.7); }
  .server-art .server-assembly { transform: scale(.78); }

  .web-art .browser-frame.modern-glass-window {
    width: min(100%, 320px);
    max-width: 100%;
    height: 174px;
    transform: rotate(-2deg);
    animation: web-screen-hover 7s ease-in-out infinite;
  }

  .web-art .web-layer { display: none !important; }

  .security-art .security-shield-assembly {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.72);
  }

  .wifi-signal-system {
    width: 285px;
    height: 285px;
    right: 50%;
    top: 53%;
  }

  .wifi-arc.arc-1 { width: 80px; height: 80px; }
  .wifi-arc.arc-2 { width: 150px; height: 150px; }
  .wifi-arc.arc-3 { width: 220px; height: 220px; }
  .wifi-arc.arc-4 { width: 285px; height: 285px; }

  .showcase .wifi-art .wifi-antenna {
    width: 93px !important;
    left: 34% !important;
    right: auto !important;
    bottom: 4% !important;
  }

  .showcase .wifi-art .wifi-radio-mast {
    width: 155px !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .showcase .wifi-art .wifi-satellite {
    width: 54px !important;
    right: 9% !important;
    top: 1% !important;
  }

  .showcase .wifi-art .wifi-mesh-nodes {
    width: 142px !important;
    left: 5% !important;
    top: 1% !important;
  }

  .showcase .wifi-art .wifi-cctv-camera {
    width: 108px !important;
    left: 0 !important;
    bottom: 0 !important;
  }

  .showcase-controls {
    left: 0;
    bottom: 12px;
    width: 100%;
    padding: 0 14px;
    transform: none;
    justify-content: center;
    gap: 10px;
  }

  .showcase-counter { gap: 5px; font-size: 10px; }
  .counter-rule { width: 15px; }
  .showcase-dots { gap: 2px; }
  .showcase-dots button { width: 19px; height: 28px; }
  .showcase-dots button::after { width: 9px; }
  .showcase-dots button[aria-current="true"]::after { width: 16px; }
  .showcase-pause { width: 30px; height: 30px; flex: 0 0 auto; }
  .showcase-arrows { margin-left: 0; gap: 6px; }
  .showcase-arrows button { width: 30px; height: 30px; font-size: 15px; }
}

@media (max-width: 380px) {
  .showcase-inner { padding-right: 17px; padding-left: 17px; }
  .showcase h1,
  .showcase h2 { font-size: 31px; }
  .showcase-copy p { font-size: 13px; }
  .showcase-art { height: 174px !important; }
  .showcase-controls { gap: 4px; padding-right: 5px; padding-left: 5px; }
  .showcase-counter { font-size: 9px; }
  .counter-rule { width: 8px; }
  .showcase-dots { gap: 0; }
  .showcase-dots button { width: 14px; }
  .showcase-pause { width: 27px; height: 27px; }
  .showcase-arrows { gap: 4px; }
  .showcase-arrows button { width: 27px; height: 27px; }
  .ecosystem-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .ecosystem-feature-grid > *,
  .ecosystem-feature { min-width: 0; max-width: 100%; }
  .ecosystem-feature p,
  .ecosystem-feature a { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-slide.banner-entering .showcase-art { animation: none !important; }
  .showcase .wifi-art .wifi-cctv-camera { animation: none !important; }
  .showcase .wifi-art .wifi-mesh-nodes { animation: none !important; }
  .security-art .security-shield-assembly {
    animation: none !important;
    translate: none !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .security-art .security-shield-assembly { transform: translate(-50%, -50%) scale(.72) !important; }
}