/* базові */
body {
  background: #0f172a;
  color: white;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
}

header {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* ЛІВА ЧАСТИНА */
.left-side {
  position: absolute;
  inset: 0;
  /* спочатку твій градієнт */
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 70%);
  /* потім локальна картинка (замінити на свою) */
  background-image:
    linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(30, 58, 138, 0.4) 70%),
    url('/img/security.jpg');
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 50% 0, 52% 40%, 48% 60%, 50% 100%, 0 100%);
  z-index: 1;
}

/* ПРАВА ЧАСТИНА */
.right-side {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #b91c1c 0%, #ef4444 50%);
  background-image:
    linear-gradient(155deg, rgba(185, 28, 28, 0.4) 0%, rgba(239, 68, 68, 0.1) 60%),
    url('/img/fire.jpg');
  background-size: cover;
  background-position: center;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 48% 60%, 52% 40%);
  z-index: 2;
}

/* КОНТЕНТ */
.content {
  position: relative;
  z-index: 10;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ЛОГОТИП */
.logo {
  position: absolute;
  top: 2rem;
  left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  z-index: 30;
}
.logo svg {
  width: 36px;
  height: 36px;
  fill: #fff;
}

/* мобілка */
@media (max-width: 768px) {
  .left-side,
  .right-side {
    clip-path: none;
    position: relative;
    min-height: 50vh;
  }
  .content {
    height: auto;
    padding-top: 7rem;
    padding-bottom: 3rem;
    text-align: center;
  }
  .logo {
    left: 1rem;
    top: 1rem;
  }
}