
/* v1.16.0 — Modern hero refresh inspired by the approved mockup.
   Scope: homepage hero only. Keep all other modules unchanged. */
.syh-home-v1160 .syh-hero-modern,
.syh-home-v1161 .syh-hero-modern {
  padding: 1.25rem 0 1rem;
}
.syh-hero-modern-card {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1.12fr);
  gap: 0;
  border-radius: 2rem;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 42%, #eef7ff 100%);
  border: 1px solid rgba(150, 191, 219, 0.34);
  box-shadow: 0 20px 48px rgba(31, 77, 122, 0.08);
}
.syh-hero-modern-copy {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 2.2vw, 2.6rem) clamp(1.25rem, 2.5vw, 3rem);
  align-self: center;
}
.syh-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  color: #596b8a;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.syh-hero-kicker strong { color: #1f75f1; }
.syh-hero-kicker span { color: #a7b7cf; }
.syh-hero-modern-copy h1 {
  margin: 0;
  font-size: clamp(2.35rem, 4.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #14385f;
}
.syh-hero-modern-copy h1 span { color: #2478f3; }
.syh-hero-tagline {
  margin: .7rem 0 1.25rem;
  font-size: clamp(1.15rem, 1.55vw, 1.65rem);
  line-height: 1.35;
  color: #35557d;
  font-weight: 500;
}
.syh-hero-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin: 0 0 1.25rem;
}
.syh-hero-mini-card {
  display: inline-flex;
  align-items: center;
  min-height: 3.35rem;
  padding: .9rem 1rem;
  border-radius: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(168, 199, 225, 0.65);
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 22px rgba(45,93,143,.06);
}
.syh-hero-mini-card:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(45,93,143,.1); }
.syh-hero-mini-card--blue { color:#1e6de8; background: linear-gradient(180deg, #f7fbff 0%, #eaf4ff 100%); }
.syh-hero-mini-card--teal { color:#0f8b84; background: linear-gradient(180deg, #f6fdfa 0%, #e7f7f4 100%); }
.syh-hero-mini-card--violet { color:#7a57e6; background: linear-gradient(180deg, #faf7ff 0%, #efe9ff 100%); }
.syh-hero-mini-card--cyan { color:#1878dd; background: linear-gradient(180deg, #f4fbff 0%, #e6f4ff 100%); }
.syh-hero-mini-card--amber { color:#d48b08; background: linear-gradient(180deg, #fffaf0 0%, #fff0c9 100%); }
.syh-hero-modern-copy .syh-hero-lead {
  margin: 0 0 1.45rem;
  max-width: 36rem;
  font-size: 1.08rem;
  line-height: 1.68;
  color: #49627f;
}
.syh-hero-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #1972ff 0%, #1d81ff 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(29, 129, 255, 0.28);
}
.syh-hero-primary-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(29, 129, 255, 0.32); }
.syh-hero-modern-visual {
  position: relative;
  min-height: 28rem;
  background:
    radial-gradient(circle at 70% 22%, rgba(255,255,255,.95) 0 15%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 60%),
    linear-gradient(130deg, #f8fcff 0%, #eef7ff 42%, #e8f2ff 100%);
}
.syh-hero-visual-swoosh {
  position: absolute;
  inset: -10% auto -10% -8%;
  width: 30%;
  min-width: 8rem;
  border-radius: 0 55% 55% 0 / 0 50% 50% 0;
  background: linear-gradient(180deg, rgba(117, 171, 255, 0.20) 0%, rgba(95, 227, 236, 0.16) 50%, rgba(255,255,255,0) 100%);
  border-right: 14px solid rgba(119, 199, 255, 0.18);
  filter: blur(.2px);
}
.syh-hero-stage {
  position: absolute;
  inset: 0;
  padding: 1.35rem 1.4rem 1.25rem 1.2rem;
}
.syh-hero-trust-list {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  z-index: 3;
}
.syh-hero-trust-list span,
.syh-hero-specialty-stack span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.95rem;
  padding: .8rem 1rem;
  border-radius: 1.05rem;
  background: rgba(255,255,255,.94);
  color: #47627f;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(43,86,126,.10);
  border: 1px solid rgba(180, 208, 230, .6);
}
.syh-hero-pedestal {
  position: absolute;
  left: 14%;
  right: 23%;
  bottom: 1.15rem;
  height: 6.8rem;
  border-radius: 999px 999px 2rem 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(228,241,255,.96));
  box-shadow: 0 18px 35px rgba(55,101,150,.10), inset 0 -8px 18px rgba(105,157,220,.12);
}
.syh-hero-pedestal::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: .8rem;
  height: .36rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(117,196,255,.1), rgba(54,151,255,.7), rgba(117,196,255,.1));
}
.syh-hero-cover-stack {
  position: absolute;
  left: 11%;
  right: 19%;
  bottom: 4rem;
  height: 19rem;
}
.syh-hero-cover {
  position: absolute;
  bottom: 0;
  width: 11.8rem;
  max-width: 24%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(31, 67, 109, 0.18));
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.syh-hero-cover--1 { left: 0%; bottom: .8rem; transform: rotate(-8deg); z-index: 2; }
.syh-hero-cover--2 { left: 14%; bottom: .3rem; transform: rotate(-3deg); z-index: 3; }
.syh-hero-cover--3 { left: 36%; width: 13.2rem; max-width: 27%; bottom: .2rem; transform: rotate(.4deg); z-index: 6; }
.syh-hero-cover--4 { left: 58%; bottom: .55rem; transform: rotate(4deg); z-index: 5; }
.syh-hero-cover--5 { left: 75%; bottom: .75rem; transform: rotate(7deg); z-index: 4; }
.syh-hero-specialty-stack {
  position: absolute;
  right: 1.35rem;
  bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  width: 11.5rem;
  z-index: 2;
}
.syh-hero-specialty-stack span {
  min-height: 2.25rem;
  padding: .45rem .8rem;
  justify-content: flex-start;
  font-size: .95rem;
}
@media (max-width: 1240px) {
  .syh-hero-modern-card { grid-template-columns: minmax(0, 1fr); }
  .syh-hero-modern-visual { min-height: 29rem; }
  .syh-hero-modern-copy { padding-bottom: 1rem; }
  .syh-hero-visual-swoosh { width: 26%; left: 0; top: auto; bottom: auto; }
}
@media (max-width: 960px) {
  .syh-hero-modern-copy { padding: 1.35rem 1.1rem 1rem; }
  .syh-hero-modern-visual { min-height: 24.5rem; }
  .syh-hero-trust-list { top: 1rem; right: 1rem; }
  .syh-hero-trust-list span { min-height: 2.45rem; font-size: .9rem; padding: .65rem .8rem; }
  .syh-hero-cover-stack { left: 6%; right: 17%; }
  .syh-hero-specialty-stack { width: 9.5rem; }
}
@media (max-width: 768px) {
  .syh-hero-modern { padding-top: .75rem; }
  .syh-hero-modern-card { border-radius: 1.6rem; }
  .syh-hero-kicker { font-size: .82rem; }
  .syh-hero-modern-copy h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .syh-hero-tagline { font-size: 1rem; }
  .syh-hero-card-grid { gap: .65rem; }
  .syh-hero-mini-card { min-height: 2.9rem; padding: .75rem .85rem; font-size: .93rem; }
  .syh-hero-modern-copy .syh-hero-lead { font-size: .98rem; line-height: 1.62; }
  .syh-hero-modern-visual { min-height: 22rem; }
  .syh-hero-trust-list,
  .syh-hero-specialty-stack { display: none; }
  .syh-hero-visual-swoosh { width: 22%; border-right-width: 10px; }
  .syh-hero-pedestal { left: 10%; right: 10%; height: 5.5rem; }
  .syh-hero-cover-stack { left: 6%; right: 6%; bottom: 3.25rem; height: 14.8rem; }
  .syh-hero-cover { width: 8.4rem; max-width: 26%; }
  .syh-hero-cover--3 { width: 9.7rem; max-width: 29%; }
}
@media (max-width: 560px) {
  .syh-hero-modern-copy { padding: 1.2rem .95rem .9rem; }
  .syh-hero-card-grid { gap: .55rem; }
  .syh-hero-mini-card { flex: 1 1 calc(50% - .55rem); justify-content: center; text-align: center; }
  .syh-hero-primary-cta { width: 100%; justify-content: center; }
  .syh-hero-modern-visual { min-height: 19rem; }
  .syh-hero-visual-swoosh { width: 18%; }
  .syh-hero-pedestal { left: 7%; right: 7%; bottom: .8rem; height: 4.9rem; }
  .syh-hero-cover-stack { left: 3%; right: 3%; bottom: 2.7rem; height: 12.6rem; }
  .syh-hero-cover { width: 6.35rem; max-width: 27%; }
  .syh-hero-cover--3 { width: 7.6rem; max-width: 31%; }
}
