.cyber-button {
  position: relative;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 3rem !important;
  background: linear-gradient(135deg, #0d1520 0%, #162233 50%, #0d1520 100%) !important;
  color: #82cfe2 !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow:
    0 0 25px rgba(130, 207, 226, 0.2),
    0 0 50px rgba(130, 207, 226, 0.08),
    inset 0 0 25px rgba(130, 207, 226, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.5) !important;
  min-width: 270px !important;
  backdrop-filter: blur(8px) !important;
  text-transform: none !important;
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  ) !important;
}

.cyber-button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, #82cfe2, #4aa0ba, #82cfe2, #2d7d9a, #82cfe2) !important;
  background-size: 300% 300% !important;
  z-index: 0 !important;
  animation: cyber-border-flow 3s ease-in-out infinite !important;
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  ) !important;
  opacity: 0.25 !important;
  transition: opacity 0.35s ease, filter 0.35s ease !important;
  pointer-events: none !important;
}

@keyframes cyber-border-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.cyber-button::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 200% !important;
  height: 100% !important;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 20px,
    rgba(130, 207, 226, 0.04) 20px,
    rgba(130, 207, 226, 0.04) 21px
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: scan-grid 25s linear infinite !important;
}

@keyframes scan-grid {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.cyber-button__glitch {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem !important;
  z-index: 2 !important;
  filter: drop-shadow(0 0 8px rgba(130, 207, 226, 0.15)) !important;
}

.cyber-button__text {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  text-shadow:
    0 0 15px rgba(130, 207, 226, 0.9),
    0 0 30px rgba(130, 207, 226, 0.5),
    0 0 60px rgba(130, 207, 226, 0.25),
    2px 2px 0 rgba(74, 160, 186, 0.3) !important;
  color: #82cfe2 !important;
  direction: rtl !important;
  transition: text-shadow 0.3s ease !important;
}

.cyber-button__text::before {
  content: "\f0e7" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  color: #82cfe2 !important;
  text-shadow: 0 0 20px rgba(130, 207, 226, 0.9) !important;
  animation: icon-glow 2s ease-in-out infinite !important;
}

@keyframes icon-glow {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.1) rotate(-5deg);
    filter: brightness(1.3);
  }
  75% {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.3);
  }
}

.cyber-button__tag {
  font-size: 0.75rem !important;
  letter-spacing: 0.3em !important;
  color: rgba(130, 207, 226, 0.7) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(130, 207, 226, 0.3) !important;
  direction: rtl !important;
  text-transform: uppercase !important;
  transition: all 0.35s ease !important;
  font-family: "Cairo", sans-serif !important;
}

.cyber-button__lights {
  display: none !important;
}

.cyber-button .cyber-button__glitch::before,
.cyber-button .cyber-button__glitch::after {
  display: none !important;
}

.cyber-button:hover {
  transform: translateY(-5px) scale(1.04) !important;
  box-shadow:
    0 0 45px rgba(130, 207, 226, 0.5),
    0 0 90px rgba(130, 207, 226, 0.25),
    inset 0 0 40px rgba(130, 207, 226, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

.cyber-button:hover::before {
  opacity: 0.45 !important;
  filter: brightness(1.4) saturate(1.2) !important;
}

.cyber-button:hover .cyber-button__text {
  text-shadow:
    0 0 25px rgba(130, 207, 226, 1),
    0 0 50px rgba(130, 207, 226, 0.7),
    0 0 80px rgba(130, 207, 226, 0.35),
    3px 3px 0 rgba(74, 160, 186, 0.4) !important;
}

.cyber-button:hover .cyber-button__tag {
  color: #82cfe2 !important;
  text-shadow: 0 0 15px rgba(130, 207, 226, 0.6) !important;
}

.cyber-button:active {
  transform: translateY(-2px) scale(1.01) !important;
}

.cyber-button--alt {
  color: #a78bfa !important;
}

.cyber-button--alt::before {
  background: linear-gradient(135deg, #a78bfa, #7c3aed, #a78bfa, #6d28d9, #a78bfa) !important;
}

.cyber-button--alt .cyber-button__text {
  color: #a78bfa !important;
  text-shadow:
    0 0 15px rgba(167, 139, 250, 0.9),
    0 0 30px rgba(167, 139, 250, 0.5),
    0 0 60px rgba(167, 139, 250, 0.25),
    2px 2px 0 rgba(124, 58, 237, 0.3) !important;
}

.cyber-button--alt .cyber-button__text::before {
  content: "\f0e0" !important;
  color: #a78bfa !important;
  text-shadow: 0 0 20px rgba(167, 139, 250, 0.9) !important;
}

.cyber-button--alt .cyber-button__tag {
  color: rgba(167, 139, 250, 0.7) !important;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.3) !important;
}

.cyber-button--alt:hover {
  box-shadow:
    0 0 45px rgba(167, 139, 250, 0.5),
    0 0 90px rgba(167, 139, 250, 0.25),
    inset 0 0 40px rgba(167, 139, 250, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

.cyber-button--alt:hover::before {
  filter: brightness(1.4) saturate(1.2) !important;
}

.cyber-button--alt:hover .cyber-button__text {
  text-shadow:
    0 0 25px rgba(167, 139, 250, 1),
    0 0 50px rgba(167, 139, 250, 0.7),
    0 0 80px rgba(167, 139, 250, 0.35),
    3px 3px 0 rgba(124, 58, 237, 0.4) !important;
}

.cyber-button--alt:hover .cyber-button__tag {
  color: #a78bfa !important;
  text-shadow: 0 0 15px rgba(167, 139, 250, 0.6) !important;
}

[data-theme="dark"] .cyber-button--alt {
  box-shadow:
    0 0 35px rgba(167, 139, 250, 0.3),
    0 0 70px rgba(167, 139, 250, 0.12),
    inset 0 0 30px rgba(167, 139, 250, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .cyber-button--alt:hover {
  box-shadow:
    0 0 55px rgba(167, 139, 250, 0.6),
    0 0 110px rgba(167, 139, 250, 0.3),
    inset 0 0 50px rgba(167, 139, 250, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .cyber-button--alt {
  box-shadow:
    0 0 25px rgba(167, 139, 250, 0.25),
    0 0 50px rgba(167, 139, 250, 0.1),
    inset 0 0 20px rgba(167, 139, 250, 0.05),
    0 8px 32px rgba(167, 139, 250, 0.15) !important;
}

[data-theme="light"] .cyber-button--alt:hover {
  box-shadow:
    0 0 40px rgba(167, 139, 250, 0.45),
    0 0 80px rgba(167, 139, 250, 0.2),
    inset 0 0 30px rgba(167, 139, 250, 0.1),
    0 12px 40px rgba(167, 139, 250, 0.25) !important;
}

[data-theme="dark"] .cyber-button {
  background: linear-gradient(135deg, #070b10 0%, #0d1520 50%, #070b10 100%) !important;
  box-shadow:
    0 0 35px rgba(130, 207, 226, 0.3),
    0 0 70px rgba(130, 207, 226, 0.12),
    inset 0 0 30px rgba(130, 207, 226, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .cyber-button:hover {
  box-shadow:
    0 0 55px rgba(130, 207, 226, 0.6),
    0 0 110px rgba(130, 207, 226, 0.3),
    inset 0 0 50px rgba(130, 207, 226, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .cyber-button {
  background: linear-gradient(135deg, #e8f4fa 0%, #d6ecf5 50%, #e8f4fa 100%) !important;
  box-shadow:
    0 0 25px rgba(130, 207, 226, 0.25),
    0 0 50px rgba(130, 207, 226, 0.1),
    inset 0 0 20px rgba(130, 207, 226, 0.05),
    0 8px 32px rgba(130, 207, 226, 0.15) !important;
}

[data-theme="light"] .cyber-button:hover {
  box-shadow:
    0 0 40px rgba(130, 207, 226, 0.45),
    0 0 80px rgba(130, 207, 226, 0.2),
    inset 0 0 30px rgba(130, 207, 226, 0.1),
    0 12px 40px rgba(130, 207, 226, 0.25) !important;
}

@media (max-width: 768px) {
  .cyber-button {
    padding: 1.1rem 2.2rem !important;
    font-size: 1rem !important;
    min-width: 220px !important;
  }

  .cyber-button__text {
    font-size: 1.15rem !important;
  }

  .cyber-button__tag {
    font-size: 0.65rem !important;
  }
}

@media (max-width: 480px) {
  .cyber-button {
    padding: 0.9rem 1.8rem !important;
    min-width: 190px !important;
  }

  .cyber-button__text {
    font-size: 1rem !important;
  }

  .cyber-button__tag {
    font-size: 0.6rem !important;
  }
}

.hero__actions .cyber-button {
  margin-top: 0.5rem !important;
}

.hero__actions {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}