#homeBaShowcase{
  position:relative;
  margin:20px 0 22px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(75, 232, 162, 0.28);
  background:
    radial-gradient(120% 120% at 8% 0%, rgba(43, 200, 140, 0.28), transparent 62%),
    radial-gradient(90% 120% at 90% 18%, rgba(125, 102, 255, 0.22), transparent 64%),
    linear-gradient(140deg, rgba(4, 18, 13, 0.96), rgba(4, 10, 16, 0.96));
  box-shadow: 0 30px 80px -44px rgba(15, 85, 58, 0.78), inset 0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden;
}
#homeBaShowcase::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:conic-gradient(from 120deg, transparent 0 30%, rgba(113,255,198,0.25) 40%, transparent 50% 100%);
  animation:home-ba-spin 16s linear infinite;
  pointer-events:none;
}
@keyframes home-ba-spin { to { transform:rotate(360deg); } }
.home-ba-head,.home-ba-body{position:relative;z-index:1}
.home-ba-head h2{
  margin:0;
  font-size:clamp(24px, 3vw, 34px);
  letter-spacing:-0.03em;
  color:#f0fff8;
}
.home-ba-head p{
  margin:10px 0 0;
  max-width:74ch;
  color:rgba(229,247,240,0.9);
  font-size:14px;
  line-height:1.55;
}
.home-ba-tabs{
  margin-top:14px;
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.home-ba-tabs::-webkit-scrollbar{display:none}
.home-ba-tabs button{
  flex:0 0 auto;
  border:1px solid rgba(130,244,194,0.35);
  background:rgba(8, 31, 22, 0.7);
  color:#cef6df;
  font-size:13px;
  font-weight:700;
  border-radius:999px;
  padding:8px 14px;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.home-ba-tabs button:hover{transform:translateY(-1px)}
.home-ba-tabs button.on{
  border-color:rgba(170,255,222,0.88);
  background:linear-gradient(120deg, rgba(45,194,139,0.28), rgba(131,110,255,0.26));
  box-shadow:0 14px 28px -20px rgba(83,255,192,0.82);
  color:#ffffff;
}
.home-ba-body{
  margin-top:16px;
  display:grid;
  gap:14px;
}
.home-ba-stage{
  --ba-pos:52%;
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  max-height:min(56vw, 480px);
  border-radius:20px;
  border:1px solid rgba(170,255,223,0.32);
  overflow:hidden;
  background:#081210;
  contain:layout paint;
  touch-action:none;
  user-select:none;
}
.home-ba-compare{
  position:absolute;
  inset:0;
  display:block;
}
.home-ba-compare.is-off{display:none!important}
.home-ba-before{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}
.home-ba-after-wrap{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:var(--ba-pos);
  overflow:hidden;
  will-change:width;
  pointer-events:none;
}
.home-ba-after{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  max-width:none;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}
.home-ba-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--ba-pos);
  width:2px;
  margin-left:-1px;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(116,255,205,0.85));
  box-shadow:0 0 0 1px rgba(0,0,0,0.2), 0 0 22px rgba(93,255,192,0.85);
  z-index:3;
  pointer-events:none;
  will-change:left;
}
.home-ba-divider::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(170,255,223,0.76);
  background:rgba(8, 22, 18, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ddfff2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 12H4l4-4M16 12h4l-4 4'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.home-ba-video{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#081210;
}
.home-ba-video.is-off{display:none!important}
.home-ba-vid-before{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.82) contrast(.95);
}
.home-ba-vid-after{
  width:100%;
  height:100%;
  object-fit:cover;
  border-left:2px solid rgba(116,255,205,.75);
  background:#081210;
}
.home-ba-vid-badge{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:4;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#eafff5;
  background:rgba(8,22,18,.78);
  border:1px solid rgba(150,255,215,.55);
  pointer-events:none;
}
.home-ba-3d{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  perspective:1100px;
  background:radial-gradient(circle at 50% 35%, rgba(60,188,140,0.22), rgba(8,16,18,0.98));
}
.home-ba-3d.is-off{display:none!important}
.home-ba-3d-cube{
  width:min(78%, 440px);
  aspect-ratio:16/10;
  position:relative;
  transform-style:preserve-3d;
  transform:rotateY(-24deg) rotateX(10deg);
  transition:transform .08s linear;
}
.home-ba-3d-face{
  position:absolute;
  inset:0;
  border-radius:14px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(150,255,215,.4);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.75);
  backface-visibility:hidden;
}
.home-ba-3d-front{transform:translateZ(56px)}
.home-ba-3d-back{transform:rotateY(180deg) translateZ(56px)}
.home-ba-3d-left{
  transform:rotateY(-90deg) translateZ(56px);
  background:linear-gradient(135deg, rgba(46,230,168,.35), rgba(8,22,18,.9));
}
.home-ba-3d-right{
  transform:rotateY(90deg) translateZ(56px);
  background:linear-gradient(135deg, rgba(131,110,255,.35), rgba(8,22,18,.9));
}
.home-ba-3d-label{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:4;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#eafff5;
  background:rgba(8,22,18,.78);
  border:1px solid rgba(150,255,215,.55);
}
.home-ba-range{
  width:100%;
  accent-color:#60f8bd;
  margin:0;
  height:28px;
}
.home-ba-range.is-off{
  opacity:0;
  height:0;
  margin:0;
  pointer-events:none;
}
.home-ba-meta h3{
  margin:0;
  color:#edfff6;
  font-size:19px;
}
.home-ba-meta p{
  margin:8px 0 0;
  color:rgba(225,247,237,0.88);
  font-size:14px;
}
.home-ba-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}
.home-ba-link{
  border:1px solid rgba(170,255,223,0.44);
  background:rgba(10,30,22,0.72);
  color:#dffff2;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  border-radius:12px;
  padding:9px 12px;
}
.home-ba-link:hover{
  border-color:rgba(186,255,230,0.82);
  background:rgba(11,44,31,0.9);
}
@media (max-width:900px){
  #homeBaShowcase{padding:16px}
  .home-ba-stage{
    aspect-ratio:4/3;
    max-height:none;
  }
  .home-ba-before,.home-ba-after,.home-ba-vid-before{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .home-ba-video{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .home-ba-vid-after{border-left:0;border-top:2px solid rgba(116,255,205,.75)}
  .home-ba-meta h3{font-size:17px}
  .home-ba-3d-cube{width:min(88%, 360px)}
}
@media (prefers-reduced-motion:reduce){
  #homeBaShowcase::before{animation:none}
  .home-ba-3d-cube{transition:none}
}