
    .hero-video { opacity: 0; transition: opacity .6s ease; }
    .hero-video.is-ready { opacity: 1; }


    .hero-blur{
    background: rgba(255,255,255,0.28);
  }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .hero-blur{
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255,255,255,0.18);
  }
}

    .hero-veil{
      background: linear-gradient(135deg,
        rgba(255,255,255,0.58),
        rgba(255,255,255,0.28) 45%,
        rgba(255,255,255,0.62)
      );
      mix-blend-mode: normal;
    }

    .hero-tint{
      background: linear-gradient(135deg,
        rgba(0,170,160,0.10),
        transparent 48%,
        rgba(178,7,16,0.10)
      );
      opacity: .85;
    }

    .logo-card{
      position: relative;
      padding: 28px 22px;
      border-radius: 28px;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(0,0,0,0.07);
      box-shadow: 0 18px 55px rgba(0,0,0,0.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow: hidden;
    }
    .logo-sheen{
      position:absolute; inset:-2px;
      background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.85), transparent 55%);
      pointer-events:none; opacity:.75;
    }
    .logo-wrap{
      width: fit-content; margin: 0 auto;
      border-radius: 999px;
      padding: 14px;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 18px 55px rgba(0,0,0,0.14);
    }
    .logo-img{ display:block; object-fit:contain; filter: drop-shadow(0 18px 40px rgba(0,0,0,0.16)); }
    .logo-img-big{ height: 156px; width: 156px; border-radius: 999px; }
    .logo-img-mid{ height: 128px; width:auto; }

    @media (min-width: 768px){
      .logo-card{ padding: 34px 26px; border-radius: 32px; }
      .logo-img-big{ height: 200px; width: 200px; }
      .logo-img-mid{ height: 156px; }
    }

    @keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
    .floaty{ animation: floaty 7s ease-in-out infinite; will-change: transform; }
    .floaty.delay{ animation-delay: 1.8s; }

    @media (max-width: 640px){
      .hero-blur{ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    }

    @media (prefers-reduced-motion: reduce){
      .floaty{ animation:none; }
      .hero-video{ display:none; }
    }