/* ── Animated border via @property conic-gradient (no overflow/clip issues) ── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin-border {
  to { --border-angle: 360deg; }
}

/* ── Primary Button ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Geometry */
  border-radius: 4rem;
  padding: 0.75rem 2rem;

  /* Animated gradient border via background layers */
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #1F3CF5 0%, #4A65FF 100%) padding-box,
    conic-gradient(
      from var(--border-angle),
      #C8A96E    0deg,
      #1F3CF5   90deg,
      #7CB9FF  180deg,
      transparent 250deg,
      transparent 320deg,
      #C8A96E  360deg
    ) border-box;
  animation: spin-border 4s linear infinite;

  /* Typography */
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;

  /* Interaction */
  cursor: pointer;
  box-shadow: 0px 1px 8px rgba(5, 7, 53, 0.18);
  transition: box-shadow 300ms ease, transform 300ms ease;
}

.btn-primary:hover {
  box-shadow: 0px 4px 16px rgba(5, 7, 53, 0.28);
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.btn-primary.btn-nav {
  padding: 0.625rem 1.375rem;
  font-size: 0.8rem;
}

/* ── Secondary Button ── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);

  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  border-radius: 4rem;
  cursor: pointer;
  white-space: nowrap;

  transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.btn-secondary:hover {
  background: var(--color-primary-light);
  box-shadow: 0px 1px 8px rgba(5, 7, 53, 0.12);
  transform: translateY(-1px);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}