*, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
      color: #e7ebf3;
      background:
        radial-gradient(1200px 600px at 20% 10%, rgba(117, 127, 239, 0.20), transparent 60%),
        radial-gradient(900px 500px at 85% 80%, rgba(0, 209, 178, 0.18), transparent 60%),
        linear-gradient(160deg, #0b1220 0%, #141b2e 55%, #1b2a44 100%);
      display: grid;
      grid-template-rows: 1fr auto;
      min-height: 100vh;
    }

    .wrap {
      display: grid;
      place-items: center;
      padding: 6vh 5vw;
    }

    .panel {
      width: min(1100px, 92vw);
      border-radius: 22px;
      padding: clamp(18px, 3vw, 32px);
      background: rgba(10, 16, 30, 0.35);
      backdrop-filter: blur(8px) saturate(120%);
      -webkit-backdrop-filter: blur(8px) saturate(120%);
      box-shadow:
        0 10px 30px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    .logos {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: clamp(16px, 4vw, 40px);
    }

    .logo-box {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 18px);
  transition: transform .25s ease, filter .4s ease;
}

/* fundalul luminos — inițial foarte discret */
.logo-box::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  border-radius: 18px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 55%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(30px);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.5s ease, filter 0.5s ease;
  z-index: 0;
}

.logo-box img {
  position: relative;
  z-index: 1;
  width: clamp(140px, 30vw, 300px);
  height: clamp(140px, 30vw, 300px);
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* efectul la hover */
.logo-box:hover::before {
  opacity: 1;
  filter: blur(40px);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,50) 0%,
    rgba(255,255,255,0.10) 100%,
    rgba(255,255,255,0) 100%
  );
  transform: scale(1.1);
}

.logo-box:hover img {
  transform: scale(1.03);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5));
}


    .divider {
      width: 2px;
      height: clamp(140px, 30vw, 300px);
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%,
                                          rgba(255,255,255,0.55) 18%,
                                          rgba(255,255,255,0.65) 50%,
                                          rgba(255,255,255,0.55) 82%,
                                          rgba(255,255,255,0) 100%);
      border-radius: 2px;
      opacity: 0.85;
    }

    footer {
      text-align: center;
      padding: 18px 16px 24px;
      font-size: clamp(13px, 2.2vw, 15px);
      color: #c9d2ea;
    }
    footer a { color: #7debd5; text-decoration: none; border-bottom: 1px dotted rgba(125, 235, 213, 0.6); }
    footer a:hover { text-decoration: underline; }

    @media (max-width: 420px) {
      .logos {
        grid-template-columns: 1fr;
        gap: 22px;
      }
      .divider { width: 80%; height: 2px; justify-self: center;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                         rgba(255,255,255,0.55) 18%,
                                         rgba(255,255,255,0.65) 50%,
                                         rgba(255,255,255,0.55) 82%,
                                         rgba(255,255,255,0) 100%);
      }
    }
.titles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-top: 8px;
  gap: 10px;
}

.titles h1 {
  flex: 1;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: #9aa6c9;
  margin: 0;
  font-weight: 500;
}

/* pe ecrane mici — se pun unul sub altul */
@media (max-width: 600px) {
  .titles {
    flex-direction: column;
    gap: 4px;
  }
}