:root{
  --glass-bg: rgba(255,255,255,0.55);
}

#scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:3px;
    z-index:70;
    background:linear-gradient(90deg,#4F46E5,#8B5CF6,#EC4899);
    transition:width .1s linear;
}

/* Small premium touches */
.hero-card{background:linear-gradient(135deg, rgba(255,255,255,0.6), rgba(245,245,250,0.35));}
.card-rounded{border-radius:16px}

/* subtle floating animation */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.floaty{animation:floaty 6s ease-in-out infinite}

/* smooth fade for dropdown */
@keyframes fade{from{opacity:0}to{opacity:1}}
.animate-fade{animation:fade .18s ease-in-out}

/* active nav */
.nav-active{color:rgb(62,85,255);font-weight:600}

.w-full-my{
    width: 73%;
}

/* Expanded about-video player */
.video-modal:not(.hidden){
  display:flex;
  animation:video-modal-in .28s ease-out both;
}

.video-modal{
  z-index:80;
}

.video-modal-panel{
  animation:video-panel-in .34s cubic-bezier(.22,1,.36,1) both;
}

@keyframes video-modal-in{
  from{opacity:0}
  to{opacity:1}
}

@keyframes video-panel-in{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .video-modal,.video-modal-panel{animation:none}
}