/* Selected redesign: Injsafe hero / variant 02 "Точный разрез". */

body.page-injsafe.internal-light .is-hero-split {
  --is-hero-ink: #071c35;
  --is-hero-blue: #07518f;
  --is-hero-cyan: #20cbe9;
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(430px, 48%) minmax(0, 1fr);
  min-height: max(620px, calc(100svh - 64px)) !important;
  padding: 0 !important;
  overflow: hidden;
  background: #f2f7fa !important;
  color: var(--is-hero-ink) !important;
}

body.page-injsafe.internal-light .is-hero-split::before {
  display: none !important;
  content: none !important;
}

.is-hero-split__copy {
  position: relative;
  z-index: 3;
  min-width: 0;
  background:
    linear-gradient(rgba(8, 75, 122, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 75, 122, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #fff 0%, #f1f7fa 100%);
  background-size: 72px 72px, 72px 72px, auto;
  clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%);
}

.is-hero-split__content {
  display: grid;
  align-content: space-between;
  height: 100%;
  min-height: 100%;
  padding: clamp(112px, 14vh, 142px) clamp(58px, 6vw, 92px) clamp(58px, 8vh, 86px) clamp(48px, 7.8vw, 120px);
}

.is-hero-split__message {
  align-self: end;
  width: min(100%, 650px);
}

body.page-injsafe.internal-light .is-hero-split .page-bc {
  position: relative;
  z-index: 2;
  display: flex !important;
  margin: 0;
  color: #61778c !important;
  font-size: 0.72rem;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

body.page-injsafe.internal-light .is-hero-split .page-bc,
body.page-injsafe.internal-light .is-hero-split .page-bc * {
  font-family: "Manrope Local", Arial, sans-serif !important;
}

body.page-injsafe.internal-light .is-hero-split h1.hero-title-stack,
body.page-injsafe.internal-light .is-hero-split .hero-title-line1 {
  font-family: "Commissioner Local", "PT Root UI", Arial, sans-serif !important;
  font-weight: 500 !important;
}

body.page-injsafe.internal-light .is-hero-split .hero-tagline,
body.page-injsafe.internal-light .is-hero-split .hero-tagline-chunk {
  font-family: "PT Root UI", Arial, sans-serif !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

body.page-injsafe.internal-light .is-hero-split h1.hero-title-stack {
  display: block;
  width: min-content;
  max-width: 8.5ch !important;
  margin: 0;
  color: var(--is-hero-ink) !important;
  font-size: clamp(4rem, 6.35vw, 7rem) !important;
  font-weight: 470;
  letter-spacing: -0.065em;
  line-height: 0.91 !important;
  text-wrap: balance;
}

body.page-injsafe.internal-light .is-hero-split .hero-title-line1 {
  color: inherit !important;
  line-height: inherit;
}

body.page-injsafe.internal-light .is-hero-split .hero-tagline {
  display: block;
  max-width: 650px !important;
  margin: clamp(24px, 3.2vh, 34px) 0 0;
  color: #152d45 !important;
  font-size: clamp(1rem, 1.32vw, 1.28rem) !important;
  font-weight: 480;
  line-height: 1.68 !important;
  text-shadow: none !important;
}

body.page-injsafe.internal-light .is-hero-split .is-hero-actions {
  margin-top: clamp(28px, 4.2vh, 42px);
}

body.page-injsafe.internal-light .is-hero-split .hero-btn-primary {
  min-height: 56px;
  justify-content: space-between;
  gap: 34px;
  padding: 0 24px;
  border-radius: 4px !important;
  background: var(--is-hero-blue) !important;
  border-color: var(--is-hero-blue) !important;
  font-size: 0.84rem;
  letter-spacing: 0;
  transition: background-color 160ms ease, transform 160ms ease !important;
}

body.page-injsafe.internal-light .is-hero-split .hero-btn-primary:hover {
  background: #063f72 !important;
  transform: translateY(-1px) !important;
}

body.page-injsafe.internal-light .is-hero-split .hero-btn-primary:focus-visible {
  outline: 3px solid var(--is-hero-cyan);
  outline-offset: 4px;
}

.is-hero-split__photo {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-left: -13%;
  background: #0b2b47 url('../img/injsafe-hero-strategy-v2.png') 61% center / cover no-repeat;
  animation: is-hero-photo-reveal 780ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.is-hero-split__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 42, 72, 0.22), transparent 38%);
  pointer-events: none;
}

.is-hero-split__frame {
  position: absolute;
  z-index: 1;
  inset: 9% 8%;
  border: 1px solid rgba(235, 249, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(32, 203, 233, 0.14);
  pointer-events: none;
}

.is-hero-split__axis {
  position: absolute;
  z-index: 4;
  left: 47.45%;
  top: 11%;
  bottom: 11%;
  width: 2px;
  background: linear-gradient(transparent, var(--is-hero-cyan) 18%, var(--is-hero-cyan) 82%, transparent);
  transform-origin: top;
  animation: is-hero-axis-reveal 680ms 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  pointer-events: none;
}

@keyframes is-hero-photo-reveal {
  from { clip-path: inset(0 0 0 100%); transform: translateX(18px); }
  to { clip-path: inset(0); transform: none; }
}

@keyframes is-hero-axis-reveal {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@media (max-width: 1180px) {
  body.page-injsafe.internal-light .is-hero-split {
    grid-template-columns: minmax(410px, 52%) minmax(0, 1fr);
  }

  .is-hero-split__content {
    padding-right: 56px;
    padding-left: clamp(38px, 6vw, 72px);
  }

  .is-hero-split__axis { left: 51.35%; }
}

@media (max-width: 820px) {
  body.page-injsafe.internal-light .is-hero-split {
    grid-template-columns: 1fr;
    grid-template-rows: clamp(300px, 48vw, 390px) auto;
    min-height: 0 !important;
  }

  .is-hero-split__copy {
    grid-row: 2;
    clip-path: none;
    min-height: 0;
  }

  .is-hero-split__content {
    display: block;
    height: auto;
    min-height: 0;
    padding: 38px clamp(24px, 6vw, 48px) 48px;
  }

  body.page-injsafe.internal-light .is-hero-split .page-bc {
    position: absolute;
    left: clamp(24px, 6vw, 48px);
    top: calc(-1 * clamp(300px, 48vw, 390px) + 30px);
    color: rgba(255, 255, 255, 0.88) !important;
  }

  body.page-injsafe.internal-light .is-hero-split .page-bc,
  body.page-injsafe.internal-light .is-hero-split .page-bc a,
  body.page-injsafe.internal-light .is-hero-split .page-bc .page-bc-home,
  body.page-injsafe.internal-light .is-hero-split .page-bc .page-bc-sep,
  body.page-injsafe.internal-light .is-hero-split .page-bc .page-bc-cur {
    color: rgba(255, 255, 255, .9) !important;
  }

  .is-hero-split__photo {
    grid-row: 1;
    margin-left: 0;
    background-position: 58% center;
  }

  body.page-injsafe.internal-light .is-hero-split h1.hero-title-stack {
    width: auto;
    max-width: 100% !important;
    font-size: clamp(3.2rem, 11.5vw, 5.2rem) !important;
    line-height: 0.94 !important;
  }

  body.page-injsafe.internal-light .is-hero-split .hero-tagline {
    margin-top: 24px;
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  .is-hero-split__axis {
    left: clamp(24px, 6vw, 48px);
    right: clamp(24px, 6vw, 48px);
    top: clamp(300px, 48vw, 390px);
    bottom: auto;
    width: auto;
    height: 2px;
    transform-origin: left;
  }

  /* The optional assistant remains available on larger layouts; on a compact
     hero it would cover the unchanged strategy copy and its primary action. */
  body.page-injsafe .ai-assistant {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body.page-injsafe.internal-light .is-hero-split {
    grid-template-rows: 300px auto;
  }

  .is-hero-split__content {
    padding: 32px 18px 40px;
  }

  body.page-injsafe.internal-light .is-hero-split .page-bc {
    left: 18px;
    top: -270px;
    font-size: 0.64rem;
    letter-spacing: 0.035em;
  }

  body.page-injsafe.internal-light .is-hero-split h1.hero-title-stack {
    font-size: clamp(2.85rem, 15vw, 3.65rem) !important;
  }

  body.page-injsafe.internal-light .is-hero-split .hero-tagline {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  body.page-injsafe.internal-light .is-hero-split .is-hero-actions {
    margin-top: 28px;
  }

  body.page-injsafe.internal-light .is-hero-split .hero-btn-primary {
    width: 100%;
    gap: 16px;
    padding: 0 16px !important;
  }

  .is-hero-split__axis {
    left: 18px;
    right: 18px;
    top: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-hero-split__photo,
  .is-hero-split__axis {
    animation: none !important;
  }
}