.hero{
  position:relative;
  overflow:hidden;
  padding:58px 24px 34px;
  color:#fff;
  background:
    radial-gradient(circle at 78% 45%, rgba(0,115,255,.22), transparent 34%),
    linear-gradient(135deg, #071827 0%, #061525 48%, #04111d 100%);
  border-top:1px solid rgba(255,255,255,.08);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.35;
  pointer-events:none;
}

.hero-wrap{
  position:relative;
  z-index:2;
  max-width:1280px;
  margin:0 auto;
  display:grid !important;
  grid-template-columns:70% 30% !important;
  align-items:center;
  gap:0;
}

.hero-content{
  min-width:0;
  max-width:760px;
  position:relative;
  z-index:3;
}

.eyebrow{
  margin:0 0 16px;
  color:#4c8dff;
  font-size:13px;
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hero h1{
  margin:0;
  color:#f4f7ff;
  font-size:clamp(42px, 4.5vw, 60px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.045em;
}

.hero h1 span{
  color:#267cff;
}

.sub{
  max-width:560px;
  margin:22px 0 30px;
  color:rgba(225,235,255,.78);
  font-size:18px;
  line-height:1.65;
}

.cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 28px;
  border-radius:7px;
  background:linear-gradient(180deg,#1d86ff,#006cff);
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 14px 35px rgba(0,102,255,.35);
}

.btn.ghost{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(116,164,255,.55);
  box-shadow:none;
}

.hero-img{
  min-width:0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  position:relative;
  z-index:1;
}

.hero-img img{
  display:block;
  width: 600px;
  max-width:none;
  height:auto;
  transform:translateX(-8%);
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.55));
}

.badges{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top:30px;
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:700;
}

.badges div{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

/* Tablet */
@media (max-width:1024px){
  .hero-wrap{
    grid-template-columns:65% 35% !important;
  }

  .hero-img img{
    width:190%;
    transform:translateX(-10%);
  }
}

/* Mobile only stacks here */
@media (max-width:767px){
  .hero{
    padding:48px 20px 34px;
  }

  .hero-wrap{
    grid-template-columns:1fr !important;
  }

  .hero-content{
    max-width:none;
  }

  .hero-img{
    justify-content:center;
    margin-top:34px;
  }

  .hero-img img{
    width:100%;
    max-width:620px;
    transform:none;
  }

  .badges{
    margin-top:28px;
    gap:16px 22px;
  }
}

@media (max-width:560px){
  .hero h1{
    font-size:38px;
  }

  .sub{
    font-size:16px;
  }

  .cta{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .badges{
    flex-direction:column;
    align-items:flex-start;
  }
}




.hero-wrap{
	padding: 0px 30px 0px 30px;
}