.sec_hero {
  position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 75% 35%, #183c76 0, #0e2448 35%, transparent 68%), linear-gradient(135deg, #081323, #0a1730 75%, #171858);
  &::before { position: absolute; z-index: -1; inset: auto 0 0; height: 68%; background: url("../../assets/images/mesh-wave.svg") center bottom / cover no-repeat; content: ""; opacity: .85; }
  &::after { position: absolute; z-index: -1; right: -15%; bottom: 0; width: 60%; height: 65%; border-radius: 50%; background: #4936b04d; filter: blur(110px); content: ""; }
  .wrap { margin: 0 auto; padding: 50px 40px 0; max-width: 1600px; display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; column-gap: 10px; }
  .main { position: relative; z-index: 2; padding: 10px 0 0; min-width: 0; }
  .eyebrow { margin-bottom: 30px; color: #a9cfff; font-family: var(--font-en); font-size: 13px; font-weight: 600; line-height: 1.4em; letter-spacing: .28em; span { color: #798fbd; } }
  h1 { font-size: 58px; font-weight: 800; line-height: 1.44em; letter-spacing: -.055em; white-space: nowrap; text-shadow: 0 5px 24px #0310247a; }
  .lead { margin-top: 24px; color: #c7d8ef; font-size: 19px; line-height: 1.8em; }
  .actions { position: relative; z-index: 3; margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; a { min-width: 230px; } }
  .visual { position: relative; z-index: 1; margin: 0 -30px 0 -45px; align-self: center; img { width: 100%; filter: drop-shadow(0 30px 35px #030a1d91); } }
  .proof { margin: 8px -40px 0; padding: 28px 40px; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #24416c; background: #071322e6; list-style: none; li { padding: 0 30px; display: flex; align-items: center; justify-content: center; gap: 15px; border-right: 1px solid #31425d; font-family: var(--font-en); font-size: 16px; font-weight: 600; line-height: 1.5em; letter-spacing: .08em; &:last-child { border-right: 0; } .icon { color: #81a9fb; font-size: 27px; font-weight: 400; } } }
  @media (max-width: 1400px) { .wrap { column-gap: 0; } h1 { font-size: 54px; } .visual { margin-left: -25px; } }
  @media (max-width: 1200px) { .wrap { padding: 50px 28px 0; } h1 { font-size: 48px; } .lead { font-size: 17px; } .actions a { min-width: 205px; } .proof { margin: 8px -28px 0; padding: 24px 28px; } }
  @media (max-width: 1000px) { .wrap { padding-top: 40px; } h1 { font-size: 42px; } .eyebrow { font-size: 11px; } .lead { font-size: 16px; } .actions { gap: 10px; a { min-width: 185px; padding: 14px 15px; font-size: 12px; } } .visual { margin-right: -28px; } }
  @media (max-width: 800px) { .wrap { grid-template-columns: 1fr; } .main { padding-bottom: 20px; } h1 { font-size: 40px; } .visual { margin: -20px auto 0; max-width: 650px; } .proof { li { padding: 0 15px; font-size: 13px; } } }
  @media (max-width: 600px) { .wrap { padding: 58px 18px 0; } .eyebrow { margin-bottom: 20px; font-size: 10px; letter-spacing: .17em; } h1 { font-size: 34px; white-space: normal; } .lead { margin-top: 20px; font-size: 15px; } .actions { margin-top: 26px; display: grid; a { width: 100%; } } .visual { margin: 10px -10px 0; } .proof { margin: 8px -18px 0; padding: 20px 18px; li { padding: 0 8px; gap: 5px; font-size: 11px; .icon { font-size: 19px; } } } }
  @media (max-width: 400px) { h1 { font-size: 30px; } .lead { font-size: 14px; } .proof li { font-size: 10px; } }
}