.hero{
  padding: 64px 0 26px;
  position:relative;
  z-index: 1;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: stretch;
}
.hero-card{
  padding: 26px;
}
.hero h1{
  margin: 6px 0 10px;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.8px;
  line-height: 1.05;
}
.hero p{
  margin: 0 0 18px;
  color: rgba(255,255,255,.74);
  font-size: 16px;
  line-height: 1.7;
}
.hero-actions{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 10px; }

.hero-right{
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.hero-shot{
  height: 100%;
  min-height: 320px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(37,245,154,.12), rgba(0,194,255,.10), rgba(255,42,166,.10)),
    url("/assets/images/placeholders/hero.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05);
  position:relative;
}
.hero-shot:after{
  content:"";
  position:absolute; inset:-40px;
  background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent 65%);
  transform: rotate(12deg);
}

.trust{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.trust-card{
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:center;
}
.icon{
  width:40px; height:40px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:grid; place-items:center;
}
.trust-title{ font-weight: 900; }
.trust-sub{ font-size: 13px; color: rgba(255,255,255,.68); }

.section{
  padding: 44px 0 0;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 18px;
  margin-bottom: 16px;
}
.section h2{
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.3px;
}
.section p{ margin: 0; color: rgba(255,255,255,.72); line-height:1.7; }

.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.card{
  padding: 16px;
  position:relative;
  overflow:hidden;
}
.card:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); transform: translateY(-1px); transition: .15s ease; }
.card .card-title{ font-weight: 950; margin: 10px 0 8px; }
.card .card-text{ color: rgba(255,255,255,.72); line-height:1.65; font-size: 14px; margin:0; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .trust{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
}