.hero {
    height: 100vh;
    background: linear-gradient(45deg, #000428, #004e92);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .hero::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff10" d="M44.7,-76.4C58.8,-69.7,71.8,-59.1,79.6,-45.1C87.4,-31.1,90,-13.7,87.6,2.4C85.2,18.5,77.8,33.3,68.4,46.5C59,59.7,47.6,71.3,33.7,77.6C19.8,83.9,3.3,85,-12.4,82.1C-28.1,79.2,-43,72.4,-56.1,62.1C-69.2,51.8,-80.5,38,-85.5,22.1C-90.5,6.2,-89.2,-11.8,-83.4,-27.8C-77.6,-43.8,-67.3,-57.8,-53.7,-64.6C-40.1,-71.4,-23.3,-71,-4.9,-63.8C13.5,-56.6,30.6,-83.1,44.7,-76.4Z" transform="translate(100 100)" /></svg>') no-repeat center center;
    animation: rotate 20s linear infinite;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 2rem;
  }
  
  .hero-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, #00f2fe, #4facfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #fff;
    opacity: 0.8;
  }