/* Variables */
.hero-module {
  --navy: #0b124b;
  --blue-bright: #2E75E0;
  --purple: #4d2d8c;
  --white: #FFFFFF;
  
  background: var(--navy);
  position: relative;
  overflow: hidden;
  display: flex; 
  flex-direction: column;
  padding-top: 100px;
  font-family: 'Noto Sans', sans-serif;
  min-height: 1072px;
  
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto 60px auto;       /* Centers the container */
  padding: 0 20px;     /* Prevents content from touching screen edges on mobile */
  width: 100%;
  position: relative;
  z-index: 2;          /* Keeps content above background shapes */
}

/* Background Effects */
.hero-bg-shapes::before, .hero-bg-shapes::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-bg-shapes::before {
  top: -200px; right: -200px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(123,34,224,0.25) 0%, transparent 70%);
}
.hero-bg-shapes::after {
  bottom: -100px; left: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(30,144,255,0.2) 0%, transparent 70%);
}

.hero-grid-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotate(45deg) scale(1.5);
    mask-image: radial-gradient(circle at 20% 30%, black 20%, transparent 80%),
              radial-gradient(circle at 80% 70%, black 10%, transparent 60%),
              linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: radial-gradient(circle at 20% 30%, black 20%, transparent 80%),
                      radial-gradient(circle at 80% 70%, black 10%, transparent 60%),
                      linear-gradient(to bottom, black, transparent);
}

.hero-diamonds { 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  overflow: hidden; 
}
.hero-diamond {
  position: absolute; width: 80px; height: 80px;
  border: 1.5px solid rgba(255,255,255,0.06);
  transform: rotate(45deg);
}


/* Text & Buttons */
.hero-text-area {
  text-align: center;
  padding: 72px 48px 44px;
  position: relative; z-index: 2;
}

h1.hero-eyebrow {
  font-size: 12px !important; letter-spacing: 2.5px; text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255);
  background: rgba(255,255,255,0.07);
  padding: 10px 28px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.18);
  text-align: center;
}

.hero-module h1 {
  font-family: 'Noto Sans', serif;
  font-size: clamp(48px, 6vw, 80px);
  color: var(--white);
  font-weight: 700;
  margin-bottom: 2px;
}


.h1-line2 {
  display: block; color: transparent;
  -webkit-text-stroke: 1px var(--blue-bright);
  font-style: italic;
}

.btn-hero {
  display: inline-block; text-decoration: none;
  background: linear-gradient(135deg, var(--blue-bright) 0%, var(--purple) 100%);
  color: var(--white); padding: 15px 34px; border-radius: 10px;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 600; box-shadow: 0 6px 28px rgba(30,144,255,0.45);
  margin-bottom: 0px;
}
.btn-hero:hover {
  opacity: 0.9; /* Slightly see-through */
  transform: translateY(-2px); /* Lifts the button up 2px */
  box-shadow: 0 10px 30px rgba(30,144,255,0.6); /* Glow effect */
  transition: all 0.3s ease; /* Makes the change smooth */
  font-family: 'Noto Sans', sans-serif;
  color: #FFFFFF; /* Ensures text is bright white */
}
  
.btn-hero-ghost {
  display: inline-block; text-decoration: none;
  color: white; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 15px 34px; border-radius: 10px;
  backdrop-filter: blur(8px);
  font-family: 'Noto Sans', sans-serif;
    margin-bottom: 0px;
}
.btn-hero-ghost:hover {
  background: rgba(255,255,255,0.15); /* Brightens the transparent background */
  border-color: rgba(255,255,255,0.5); /* Makes the border more visible */
  color: #FFFFFF; /* Ensures text is bright white */
  transition: all 0.3s ease;
  font-family: 'Noto Sans', sans-serif;
}
.hero-sub {
  font-size: 17px; 
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  font-weight: 300;
  max-width: 640px;
  /* Centering the block since margin-top/bottom are now dynamic */
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

/* Ensure any paragraphs inside the rich text field inherit the color */
.hero-sub p {
  color: inherit;
  margin-bottom: 0;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Important for mobile so buttons stack */
  gap: 20px; /* Adjust this value to your liking */
}
section.hero-module .lottie-container {
  margin-top: -50px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .hero-text-area {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-module {
    min-height: 700px;
  }
  }
}