*{
  box-sizing: border-box;
}
      :root{
            --gradient-purple:linear-gradient(270deg, #3b82f6, #9333ea,  #3b82f6);
    --gradient-cyber: linear-gradient(135deg, hsl(222 25% 8%), hsl(220 30% 15%), hsl(200 40% 20%));
    --gradient-neon: linear-gradient(135deg, hsl(200, 98%, 56%), hsl(165, 94%, 49%));
    --gradient-hero: linear-gradient(135deg, hsl(222 25% 8%) 0%, hsl(220 30% 12%) 50%, hsl(200 20% 15%) 100%);
    --glow-primary: 0 0 30px hsl(200 100% 60% / .3);
    --glow-accent: 0 0 25px hsl(165 100% 50% / .3);
    --gradient-color:linear-gradient(135deg, hsl(222 25% 8%), hsl(220 30% 15%), hsl(200 40% 20%));

  --bg-page: #111827;
  --bg-card: #1f2937;
  --bg-light: #374151;
  --border-color: #374151;


}
/* Pricing Section */
.mc_pricing {
  background: var(--gradient-hero);
  padding: 100px 20px;
  text-align: center;
}

.mc_pricing h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 40px;
}

.pricing_grid {


  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}


.pricing_card {   
   background:var(--gradient-hero);
  padding: 30px;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.pricing_card:hover {
  transform: translateY(1px);
}
.popular {
  border: 2px solid var(--primary);
  transform: scale(1.01)
}
.pricing_card h3 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.price {

  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 20px;
}

.pricing_card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.pricing_card ul li {
  color: var(--text-secondary);
  margin: 8px 0;
}


/* Buttons */
.btn-primary {
  background: var(--primary);         /* main brand color */
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Hover effect - minimal color change */
.btn-primary:hover {
  background-color: hsl(200, 100%, 50%);    /* slightly darker shade of your brand */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Active / click effect */
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Features Section */
.mc_features {
  background: var(--navbar-bg);
  padding: 60px 20px;
  text-align: center;
}

.mc_features h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 40px;
}

.features_grid {
  display: grid;
  grid-template-columns: repeat(0, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.feature_card {
  background: var(--gradient-cyber);
  padding: 25px;
  border-radius: 12px;
  color: var(--text-secondary);
  box-shadow: var(--glow-primary);
  transition: transform 0.3s ease;
}

.feature_card h3 {
  color: var(--secondary);
  margin-bottom: 10px;
}

.feature_card:hover {
  transform: translateY(-8px);
}

/* Responsive */
@media (max-width: 1024px) {
  .pricing_grid {
    grid-template-columns: 1fr 1fr;
  }
  .features_grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .pricing_grid,
  .features_grid {
    grid-template-columns: 1fr;
  }
}