.hero-split{
  padding-top:40px;
  min-height:70vh;
  display:grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap:24px;
  align-items:stretch;
}

.hero-left{
  display:flex;
  flex-direction: column;
  align-items: center; 
  gap:16px;
  margin-left: -6vw; 
}

.hero-preview{
  width: 100%;
  aspect-ratio: 16 / 10;
}
.hero-frame{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius:4px;
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  opacity:0;
  transition: opacity 1600ms ease;
  will-change: opacity, transform;
}
.hero-img.is-active{
  opacity:1;
  animation: kenburns 8s ease-in-out both;
}
@keyframes kenburns{
  0%   { transform: scale(1.06) translate3d(-5.6%, -2.6%, 0); }
  50%  { transform: scale(1.3) translate3d( 1.0%, -0.8%, 0); }
  100% { transform: scale(1.06) translate3d( 0, 0, 0); }
}
/* @keyframes kenburns{
  0%   { transform: scale(1.06) translate3d(-1.6%, 0, 0); }
  50%  { transform: scale(1.12) translate3d( 1.0%, -0.8%, 0); }
  100% { transform: scale(1.06) translate3d( 0, 0, 0); }
} */


.hero-btn{ align-self:center; }

.hero-right{
  /* margin:0 -40px 8px 0px; */
  padding:18px;
  border-radius:8px;
  background-image: url("images/dark_wood_2.webp");
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.08);
  margin-right: -6vw;  
  letter-spacing:.6px;
  
}
.hero-right h1{
  margin:10px 0 12px 0px;
  font-size: clamp(16px, 3.4vw, 18px);
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text2);
  text-align: center;
}
.hero-right h2{
  margin:0 0 6px 0;
  font-size: clamp(14px, 3.4vw, 18px);
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text2);
  text-align: center;
}
.hero-text{
  color: var(--muted);
  line-height:1.4;
  margin:0 0 14px 0;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align:left;
  font-weight: 100;
  font-size: clamp(14px, 3.4vw, 15px);

}
.hero-list{
  /* margin:0 0 18px 18px; */
   /* margin:0 0 10px 0; */
   line-height:1.4;
  font-size: clamp(13px, 2.4vw, 15px);
  color: rgba(232,238,252,.9);
  text-align: start;
}
.hero-list p{
  margin:22px 0 10px 0;
  font-size: clamp(16px, 3.4vw, 18px);
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text2);
  text-align:left;
  margin-left: -1vw;
}

.hero-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
}

@media (max-width: 900px){
  .hero-split{ grid-template-columns: 1fr; }
  .hero-left{ margin-left: 0; }
  .hero-right{margin-right: 0;text-align:start;  }
  .hero-list p{text-align:left;margin-left: -4px;}
  .hero-text{text-align:start;}
}

@media (max-width: 900px){
  .hero-split{
    grid-template-columns: 1fr;
    gap: 14px;
  }


}

@media (max-width: 640px){
  .hero-preview{
    aspect-ratio: 16 / 11;
  }

  .hero-right{
    padding: 14px;
  }

  .hero-cta{
    gap: 8px;
  }
}