.ctaBrutal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border: none;
  outline: none;
}

.content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* SIZES */

.small {
  padding: 0.5rem 1.25rem;
  font-size: 0.75rem;
}

.medium {
  padding: 0.75rem 1.75rem;
  font-size: 0.875rem;
}

.large {
  padding: 1rem 2.25rem;
  font-size: 1rem;
}

/* VARIANTS */

/* Primary - bold black with colored border */
.primary {
  background: #000;
  color: #fff;
  border: 3px solid #ff0040;
}

.primary:hover {
  background: #ff0040;
  color: #000;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #000;
}

/* Secondary - gray */
.secondary {
  background: #333;
  color: #fff;
  border: 3px solid #666;
}

.secondary:hover {
  background: #ff0040;
  border-color: #ff0040;
  color: #000;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #000;
}

/* Outline - transparent background */
.outline {
  background: transparent;
  color: #000;
  border: 3px solid #ff0040;
}

.outline:hover {
  background: #ff0040;
  color: #000;
  transform: translate(-2px, -2px);
}

/* Ghost - minimal hover only */
.ghost {
  background: transparent;
  color: #000;
  border: none;
  padding-left: 0;
  padding-right: 0;
}

.ghost:hover {
  background: rgba(255, 0, 64, 0.1);
}

/* FULL WIDTH */
.fullWidth {
  width: 100%;
}

/* ARROW */

.withArrow .arrow {
  transition: transform 0.2s ease;
}

.right:hover .arrow {
  transform: translateX(4px);
}

.left:hover .arrow {
  transform: translateX(-4px);
}

.up:hover .arrow {
  transform: translateY(-4px);
}

.down:hover .arrow {
  transform: translateY(4px);
}

/* GLITCH ON HOVER */

.glitch:hover {
  animation: cta-glitch 0.3s infinite;
}

@keyframes cta-glitch {
  0%, 100% {
    transform: translate(0);
  }
  25% {
    transform: translate(-2px, 2px);
  }
  50% {
    transform: translate(2px, -2px);
  }
  75% {
    transform: translate(-1px, -1px);
  }
}

.glitch::before,
.glitch::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.glitch::before {
  color: #ff00ff;
  transform: translate(-2px, 0);
  z-index: -1;
}

.glitch::after {
  color: #00ffff;
  transform: translate(2px, 0);
  z-index: -2;
}

/* ANIMATED BACKGROUND */

.animated {
  background: linear-gradient(
    90deg,
    #000 0%,
    #ff0040 50%,
    #000 100%
  );
  background-size: 200% 100%;
  animation: cta-gradient 3s ease infinite;
}

@keyframes cta-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.animated.primary:hover {
  background-position: 100% 50%;
}

.animated.outline {
  background: transparent;
}

/* COLOR VARIANTS */

/* Red */
.ctaBrutal.red {
  border-color: #ff0000;
}

.ctaBrutal.red:hover {
  background: #ff0000;
}

/* Green */
.ctaBrutal.green {
  border-color: #00ff00;
}

.ctaBrutal.green:hover {
  background: #00ff00;
}

/* Blue */
.ctaBrutal.blue {
  border-color: #0066ff;
}

.ctaBrutal.blue:hover {
  background: #0066ff;
}

/* Yellow */
.ctaBrutal.yellow {
  border-color: #ffff00;
}

.ctaBrutal.yellow:hover {
  background: #ffff00;
  color: #000;
}

/* Purple */
.ctaBrutal.purple {
  border-color: #9900ff;
}

.ctaBrutal.purple:hover {
  background: #9900ff;
}

/* Cyan */
.ctaBrutal.cyan {
  border-color: #00ffff;
}

.ctaBrutal.cyan:hover {
  background: #00ffff;
  color: #000;
}

/* BORDER VARIANTS */

/* Thick border */
.ctaBrutal.thick {
  border-width: 5px;
}

/* Double border */
.ctaBrutal.double {
  border: 3px solid #ff0040;
  outline: 3px solid #ff0040;
  outline-offset: 3px;
}

/* Dashed border */
.ctaBrutal.dashed {
  border-style: dashed;
}

/* Dotted border */
.ctaBrutal.dotted {
  border-style: dotted;
}

/* CORNER VARIANTS */

/* Cut corners */
.ctaBrutal.cutCorners {
  clip-path: polygon(
    0 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% 100%,
    15px 100%,
    0 calc(100% - 15px)
  );
}

/* Angled corners */
.ctaBrutal.angled {
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
}

/* EFFECTS */

/* Skew effect */
.ctaBrutal.skew {
  transform: skewX(-10deg);
}

.ctaBrutal.skew:hover {
  transform: skewX(-10deg) translate(-2px, -2px);
}

/* Rotate effect */
.ctaBrutal.rotate {
  transform: rotate(-2deg);
}

.ctaBrutal.rotate:hover {
  transform: rotate(-2deg) translate(-2px, -2px);
}

/* 3D effect */
.ctaBrutal.threeD {
  box-shadow: 4px 4px 0 #000, 8px 8px 0 #333;
}

.ctaBrutal.threeD:hover {
  box-shadow: 6px 6px 0 #000, 12px 12px 0 #333;
  transform: translate(-2px, -2px);
}

/* STATE VARIANTS */

/* Loading */
.ctaBrutal.loading {
  pointer-events: none;
  opacity: 0.7;
}

.ctaBrutal.loading::after {
  content: '...';
  animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Disabled */
.ctaBrutal.disabled {
  pointer-events: none;
  opacity: 0.4;
}

.ctaBrutal.disabled:hover {
  transform: none;
  background: #333;
  color: #999;
}

/* PRESSED */
.ctaBrutal:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

/* FOCUS */
.ctaBrutal:focus {
  outline: 3px solid #ff0040;
  outline-offset: 2px;
}

/* ICON ONLY */
.ctaBrutal.iconOnly {
  padding: 0.75rem;
  min-width: 2.5rem;
}

.ctaBrutal.iconOnly.small {
  padding: 0.5rem;
  min-width: 2rem;
}

.ctaBrutal.iconOnly.large {
  padding: 1rem;
  min-width: 3rem;
}