*{box-sizing:border-box}body{margin:0;background:#050507;color:#fff;font-family:Arial,sans-serif}.hero{height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero video{position:absolute;width:100%;height:100%;object-fit:cover}.overlay{position:absolute;inset:0;background:#0008}.content{position:relative;text-align:center;z-index:2}.logo{width:min(520px,80vw)}h1{font-size:clamp(40px,7vw,90px)}p{font-size:20px}.button{display:inline-block;margin-top:30px;padding:15px 35px;border:1px solid #fff;border-radius:50px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:80px}.grid div{background:#111;padding:40px;text-align:center}section:not(.hero){padding:60px 10%;text-align:center}footer{text-align:center;padding:40px}@media(max-width:800px){.grid{grid-template-columns:1fr}}

/* MEDIASTIR HERO FINAL: contained hero logo treatment */
.hero-content {
    position: relative;
}

.logo-float {
    animation: mediastirLogoFloat 6s ease-in-out infinite;
}

.logo-float img {
    animation: mediastirLogoFade 1.5s ease forwards;
}

.hero-content h1,
.hero-content p,
.hero-content .coming-soon {
    opacity: 0;
    animation: mediastirTextFade 1s ease forwards;
}

.hero-content h1 { animation-delay: 1.1s; }
.hero-content p { animation-delay: 1.5s; }
.hero-content .coming-soon { animation-delay: 1.9s; }

@keyframes mediastirLogoFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes mediastirLogoFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mediastirTextFade {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}