body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #000;
    }

    .hero {
      position: relative;
      width: 100%;
      height: 55vh; /* desktop height */
      overflow: hidden;
      cursor: pointer;
    }

    /* Video background */
    .hero video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }

    /* Logo overlay */
    .hero-logo {
      position: absolute;
      bottom: -200px; /* start hidden */
      left: 52%;
      transform: translateX(-50%) scale(0.8);
      opacity: 0;
      transition: bottom 1s ease, opacity 1s ease, transform 1s ease;
    }

    .hero-logo img {
      width: 180px;
      max-width: 80%;
      display: block;
    }

    /* Desktop hover */
    @media (hover: hover) and (pointer: fine) {
      .hero:hover .hero-logo {
        bottom: 30%;
        opacity: 1;
        transform: translateX(-50%) scale(1);
      }
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
      .hero {
        height: 50vh;
      }
      .hero-logo {
        bottom: -120px;
      }
      .hero-logo img {
        width: 120px;
      }
    }