.hero {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #16233c 0%, #274060 100%);
}

.hero-background {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden;
  z-index: 1;
  /* fallback image */
  background: url('../assets/bg.jpg') center center/cover no-repeat; 
}
.hero-bg-video {
  position: absolute;
  top: 0; left: 0; width: 100vw; height: 100vh;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.99) contrast(0.9) blur(0.5px);
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  max-height: none;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(10,20,60,0.70), rgba(30,30,50,0.55));
  z-index: 2;
}
.particle { position: absolute; background: #DAA520; border-radius: 50%; animation: float 4s ease-in-out infinite;}
.particle:nth-child(1) { width: 10px; height: 10px; top: 20%; left: 10%; animation-delay: 0s;}
.particle:nth-child(2) { width: 15px; height: 15px; top: 60%; left: 80%; animation-delay: 1s;}
.particle:nth-child(3) { width: 8px; height: 8px; top: 40%; left: 70%; animation-delay: 2s;}
.particle:nth-child(4) { width: 12px; height: 12px; top: 80%; left: 20%; animation-delay: 3s;}
.particle:nth-child(5) { width: 6px; height: 6px; top: 30%; left: 90%; animation-delay: 4s;}
.hero-content { text-align: center; color: white; z-index: 2; max-width: 800px; padding: 2rem; animation: fadeInUp 1s ease;}
.hero-title { margin-bottom: 2rem; position: relative;}
.title-line { display: block; font-size: 1.5rem; font-weight: 300; margin-bottom: 0.5rem; animation: fadeInLeft 1s ease 0.2s both;}
.title-main { display: block; font-size: 4rem; font-weight: bold; background: linear-gradient(45deg, #FF6B35, #DAA520, #FFF8DC); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient 3s ease infinite, zoomIn 1s ease 0.4s both; margin-bottom: 0.5rem;}
.title-subtitle { display: block; font-size: 1.8rem; font-weight: 400; color: #FFF8DC; animation: fadeInRight 1s ease 0.6s both;}
.hero-description { font-size: 1.2rem; margin-bottom: 2rem; color: #FFF8DC; animation: fadeInUp 1s ease 0.8s both;}
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeInUp 1s ease 1s both;}
.btn-hero { padding: 1rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; position: relative; overflow: hidden;}
.btn-hero.primary { background: linear-gradient(45deg, #FF6B35, #DAA520); color: white; box-shadow: 0 4px 15px rgba(255,107,53,0.3);}
.btn-hero.primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255,68,0,0.4); animation: pulse 0.6s ease;}
.btn-hero.secondary { background: transparent; color: #FFF8DC; border: 2px solid #FFF8DC;}
.btn-hero.secondary:hover { background: #FFF8DC; color: #1B365D; transform: translateY(-3px); animation: glow 0.6s ease;}
.hero-scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite;}
.scroll-arrow { width: 30px; height: 30px; border: 2px solid #FFF8DC; border-radius: 50%; position: relative;}
.scroll-arrow::after { content: ''; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-right: 2px solid #FFF8DC; border-bottom: 2px solid #FFF8DC; transform: rotate(45deg);}
@media (max-width: 768px) { .title-main { font-size: 2.5rem; } .hero-content { padding: 1rem; } .hero-buttons { flex-direction: column; align-items: center;} .btn-hero { width: 200px; }}
@media (max-width: 480px) { .title-main { font-size: 2rem;} .hero-description { font-size: 1rem;} }