/* --- HERO BANNER --- */

.hero-banner {

  position: relative;

  width: 100%;

  height: 65dvh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}



.hero-banner::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  background-image: linear-gradient(to top, #161616 10%, transparent);

}



.image-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  z-index: 0;

}



.banner-img {

  width: 100%;

  height: 100%;

  object-fit: cover;



}



.overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);

  z-index: 1;

}



.main-content {

  position: relative;

  z-index: 2;

  text-align: center;

  color: white;

  max-width: 800px;

  padding: 0 1rem;

}





.big-title {

  font-size: 5.5rem;

  font-weight: 900;

  text-shadow: 2px 2px 8px rgba(250, 243, 243, 0.3);

  transform: scale(1.05) skewX(-3deg);

  margin-bottom: 1rem;

}



.big-title:hover {

  text-shadow: 4px 4px 12px rgba(231, 227, 227, 0.3);

  cursor: default;

}



.second-paragraph {

  font-size: 1rem;

  color: rgba(255, 255, 255, 0.795);

  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);

  font-weight: 700;

  margin-top: 0;

}

















@media screen and (max-width: 450px) {



  .big-title {

    font-size: 3rem; 

    transform: scale(1) skewX(-2deg); 

  }





}































/*  Features Section */





.features {

    padding: 6rem 2rem;



}







.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    max-width: 1400px;

    margin: 0 auto;

}



.feature-card {

    background: #1e1e1e; 

    border-radius: 1rem;

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border: 1px solid #2c6ba5; 

    box-shadow: 0 2px 6px rgba(44, 107, 165, 0.3);

    color: #ddd; 

}



.feature-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(44, 107, 165, 0.6);

    border-color: #2c6ba5;

}



.banner-container {

    width: 100%;

    height: 200px;

    overflow: hidden;

}



.banner-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.feature-card:hover .banner-image {

    transform: scale(1.05);

}



.banner-text {

    padding: 2rem;

}



.banner-title {

    font-size: 1.5rem;

    margin-bottom: 1rem;

    color: #fff;

}



.highlight {

    color: #2c6ba5; 

    font-weight: 700;

}



/* end Features Section */





























































@keyframes glow {

  0%, 100% {

    box-shadow: 0 0 5px transparent;

  }

  50% {

    box-shadow: 0 0 12px currentColor;

  }

}



@keyframes pulseBorder {

  0%, 100% {

    border-color: transparent;

  }

  50% {

    border-color: currentColor;

  }

}





.status-badge {

  display: inline-block;

  padding: 0.5rem 1rem;

  border-radius: 0.5rem;

  font-weight: 500;

  font-size: 0.875rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  animation: glow 3s infinite ease-in-out;

}





.status-badge.undetected {

  background: rgba(34, 197, 94, 0.1);

  color: #22c55e;

  border: 1px solid rgba(34, 197, 94, 0.2);

  animation: glow 3s infinite ease-in-out;

}





.status-badge.update {

  background: rgba(234, 179, 8, 0.1);

  color: #eab308;

  border: 1px solid rgba(234, 179, 8, 0.2);

  animation: glow 3s infinite ease-in-out;

}





.status-badge.detected {

  background: rgba(239, 68, 68, 0.1);

  color: #ef4444;

  border: 1px solid rgba(239, 68, 68, 0.2);

  animation: glow 2.5s infinite ease-in-out;

}





/* couleur Status badges */



.card-image {

    width: 100%;

    border-bottom: 1px solid #009dff00;

    height: 200px;

    object-fit: cover;

    border-radius: 0.5rem 0.5rem 0 0;

    margin-bottom: 1rem;

}



.card-content {

    padding: 1rem;

}



.card-content h3 {

    font-size: 1.125rem;

    font-weight: 600;

    margin-bottom: 0.75rem;

    color: var(--text);

}





.feature-card:hover .card-image {

    transform: scale(1.05);

    transition: transform 0.3s ease;

}



.feature-card:hover .status-badge {

    transform: translateY(-2px);

    transition: transform 0.3s ease;

}