.hero{min-height:100vh;padding:80px 60px;display:grid;grid-template-columns:1fr 0.95fr;gap:60px;align-items:center;background:linear-gradient(#08111D,#050A12)}

.hero h1{font-size:72px;line-height:1.05}

.hero h1 span{color:#1E88FF}

.hero p{color:#B7C3D0}

.hero-image {
  position: relative;
  height: 720px !important;
  border-radius: 24px;
  background: linear-gradient(135deg,#1E88FF,#0C1727);
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

.hero-image .hero-photo {
    position:relative;
    width:auto;
    height:120%;
    max-width:none;
    object-fit:contain;

    transform:translateX(40px) translateY(25px);

}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:25px;
}

.card{
    background:#0C1727;
    border-radius:18px;
    overflow:hidden;
    transition:all .35s ease;
    border:1px solid rgba(90,190,255,.12);
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.card h3,
.card p{
    padding-left:25px;
    padding-right:25px;
}

.card h3{
    margin-top:20px;
}

.card p{
    color:#B7C3D0;
    padding-bottom:25px;
}

.card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 0 20px rgba(30,136,255,.15),
        0 0 40px rgba(30,136,255,.08);
}

.card:hover img{
    transform:scale(1.05);
}

.mixer{background:#0C1727;padding:25px;border-radius:18px;margin-top:25px}