@property --kl-button-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -90deg;
}

@property --kl-button-glow-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(214, 181, 111, 0.2);
}

@property --kl-button-glow-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(241, 223, 184, 0.95);
}

@property --kl-button-glow-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(167, 122, 53, 0.58);
}

.kl-button,
.kl-button.bricks-button {
  --kl-button-surface: linear-gradient(#fff, #fff);
  --kl-button-foreground: currentColor;
  --kl-button-glow-1: rgba(214, 181, 111, 0.2);
  --kl-button-glow-2: rgba(241, 223, 184, 0.95);
  --kl-button-glow-3: rgba(167, 122, 53, 0.58);
  --kl-button-border-rest: transparent;
  --kl-button-glow-opacity: 0.22;
  --kl-button-glow-hover: 0.5;
  --kl-button-glow-blur: 12px;
  --kl-button-shadow: 0 14px 34px rgba(6, 20, 38, 0.15);
  --kl-button-inner-highlight: rgba(255, 255, 255, 0.18);
  --kl-button-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 54px;
  padding-inline: 24px;
  gap: 10px;
  border: 1px solid transparent;
  border-color: transparent !important;
  color: var(--kl-button-foreground) !important;
  background:
    var(--kl-button-surface) padding-box,
    conic-gradient(
      from var(--kl-button-angle),
      var(--kl-button-border-rest) 0deg 38deg,
      var(--kl-button-glow-1) 58deg,
      var(--kl-button-glow-2) 88deg,
      var(--kl-button-glow-3) 112deg,
      var(--kl-button-border-rest) 146deg 360deg
    ) border-box !important;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--kl-button-shadow), inset 0 1px 0 var(--kl-button-inner-highlight);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.025em;
}


/*
 * Hero CTA sizing contract:
 * Motion classes only control animation; every button in this semantic group
 * shares the same geometry, including native Bricks buttons without KL variants.
 */
.kl-home-hero__buttons {
  inline-size: min(100%, 368px);
}

.kl-home-hero__buttons > .bricks-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 54px;
  padding-inline: 24px;
  justify-content: center;
}

@media (max-width: 478px) {
  .kl-home-hero__buttons > .bricks-button.bricks-button {
    padding-inline: 20px;
  }
}

.kl-button-motion {
  transform: translate3d(0, 0, 0);
  transition:
    transform 380ms var(--kl-button-ease),
    box-shadow 380ms var(--kl-button-ease),
    color 280ms ease,
    opacity 280ms ease,
    --kl-button-glow-1 240ms ease,
    --kl-button-glow-2 240ms ease,
    --kl-button-glow-3 240ms ease;
}

.kl-button.kl-button-motion.kl-header__cta {
  min-height: 44px;
  padding: 8px 20px;
}

.kl-button-motion:not(.kl-button--ghost):not(.kl-button--text-cta)::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--kl-button-angle),
    transparent 0deg 42deg,
    var(--kl-button-glow-1) 62deg,
    var(--kl-button-glow-2) 90deg,
    var(--kl-button-glow-3) 118deg,
    transparent 150deg 360deg
  );
  filter: blur(var(--kl-button-glow-blur));
  opacity: var(--kl-button-glow-opacity);
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity 380ms ease, filter 380ms ease;
}

.kl-button-motion:not(.kl-button--ghost):not(.kl-button--text-cta)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 42%, transparent 62%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.kl-button-motion.kl-button--outline::after {
  inset: 1.5px;
  opacity: 0.82;
}

.kl-button-motion:not(.kl-button--ghost):not(.kl-button--text-cta):hover {
  transform: translateY(-2px);
  box-shadow:
    var(--kl-button-shadow),
    0 0 30px rgba(214, 181, 111, 0.19),
    inset 0 1px 0 var(--kl-button-inner-highlight);
  transition-duration: 200ms;
}

.kl-button-motion:not(.kl-button--ghost):not(.kl-button--text-cta):hover::before {
  opacity: var(--kl-button-glow-hover);
  filter: blur(calc(var(--kl-button-glow-blur) + 3px));
}

.kl-button-motion:not(.kl-button--ghost):not(.kl-button--text-cta):active {
  transform: translateY(0) scale(0.985);
  transition-duration: 100ms;
}

.kl-button.kl-button--primary,
.kl-button.kl-button--light {
  --kl-button-surface: linear-gradient(135deg, #f7e9c9 0%, #ddba73 48%, #bb8c45 100%);
  --kl-button-foreground: #03101f;
  --kl-button-glow-1: rgba(255, 248, 226, 0.38);
  --kl-button-glow-2: rgba(255, 253, 240, 0.96);
  --kl-button-glow-3: rgba(194, 149, 78, 0.7);
  --kl-button-glow-opacity: 0.25;
  --kl-button-glow-hover: 0.56;
  --kl-button-glow-blur: 10px;
  --kl-button-shadow: 0 8px 18px rgba(110, 78, 29, 0.14), 0 0 0 1px rgba(255, 248, 226, 0.34);
  --kl-button-inner-highlight: rgba(255, 255, 255, 0.62);
}

.kl-button-motion.kl-button--primary:hover {
  --kl-button-shadow: 0 12px 24px rgba(110, 78, 29, 0.19), 0 0 0 1px rgba(255, 248, 226, 0.48);
}

.kl-button.kl-button--secondary {
  --kl-button-border-rest: rgba(234, 217, 189, 0.16);
  --kl-button-surface: linear-gradient(145deg, #0b2d5d 0%, #06101f 100%);
  --kl-button-foreground: #fffdf8;
  --kl-button-glow-1: rgba(234, 217, 189, 0.18);
  --kl-button-glow-2: rgba(255, 248, 226, 0.82);
  --kl-button-glow-3: rgba(173, 140, 96, 0.44);
  --kl-button-glow-opacity: 0.16;
  --kl-button-glow-hover: 0.4;
  --kl-button-shadow: 0 10px 24px rgba(6, 16, 31, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --kl-button-inner-highlight: rgba(255, 255, 255, 0.12);
}

.kl-button.kl-button--dark {
  --kl-button-surface: linear-gradient(145deg, #102c4b, #07192d);
  --kl-button-foreground: #fffdf8;
  --kl-button-glow-opacity: 0.2;
  --kl-button-glow-hover: 0.48;
  --kl-button-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  --kl-button-inner-highlight: rgba(255, 255, 255, 0.12);
}

.kl-button.kl-button--outline {
  --kl-button-surface: linear-gradient(145deg, #fffdf8, #f5ecdc);
  --kl-button-foreground: #061426;
  --kl-button-glow-1: rgba(167, 122, 53, 0.24);
  --kl-button-glow-2: rgba(241, 223, 184, 0.72);
  --kl-button-glow-3: rgba(194, 149, 78, 0.38);
  --kl-button-glow-opacity: 0.1;
  --kl-button-glow-hover: 0.28;
  --kl-button-shadow: inset 0 0 0 1px rgba(167, 122, 53, 0.3), 0 4px 12px rgba(83, 57, 20, 0.04);
  --kl-button-inner-highlight: rgba(255, 255, 255, 0.9);
}

.kl-button.kl-button--ghost {
  --kl-button-foreground: rgba(255, 253, 248, 0.79);
  border-color: rgba(241, 223, 184, 0.16) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 0 0 1px rgba(241, 223, 184, 0.07);
  transform: none;
}

.kl-button-motion.kl-button--ghost::before,
.kl-button-motion.kl-button--ghost::after,
.kl-button-motion.kl-button--text-cta::before,
.kl-button-motion.kl-button--text-cta::after {
  display: none;
}

.kl-button-motion.kl-button--ghost:hover {
  color: #fffdf8;
  border-color: rgba(241, 223, 184, 0.26);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px rgba(241, 223, 184, 0.11);
  transform: none;
}

.kl-button.kl-button--text-cta,
.kl-button.kl-button--text-cta:hover {
  min-height: 32px;
  padding-inline: 0;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none;
  transform: none;
}

.kl-button-motion > svg,
.kl-button-motion > i {
  transition: transform 350ms var(--kl-button-ease);
}

.kl-button-motion:hover > svg,
.kl-button-motion:hover > i {
  transform: translateX(3px);
}

@media (hover: none), (pointer: coarse), (max-width: 767px), (prefers-reduced-motion: reduce) {
  .kl-button-motion {
    --kl-button-angle: 35deg;
  }

  .kl-button-motion:hover,
  .kl-button-motion:active,
  .kl-button-motion:hover > svg,
  .kl-button-motion:hover > i {
    transform: none;
  }
}

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .kl-button,
  .kl-button.bricks-button {
    border-color: #d6b56f;
    background: var(--kl-button-surface);
  }

  .kl-button-motion::before {
    display: none;
  }
}