@property --cyber-trace-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.cyber-button {
  --cyber-accent: var(--accent-cyan);
  --cyber-accent-2: #bffefa;
  --cyber-glow: rgba(83, 225, 255, 0.34);
  --cyber-surface-a: rgba(14, 92, 123, 0.82);
  --cyber-surface-b: rgba(5, 22, 36, 0.94);
  --cyber-base-solid: #071421;
  /* Canon note: if you appreciate this style, consume the whole primitive. Do not copy only the fill, trace, or shape into a local partial clone. First Break proved this pseudo-shell; SVG strokes, masks, duplicate keyframes, and base-stylesheet redefinitions are regression traps. */
  --cyber-cut: 18px;
  --cyber-inset: 2px;
  --cyber-shape: polygon(var(--cyber-cut) 0, 100% 0, 100% calc(100% - var(--cyber-cut)), calc(100% - var(--cyber-cut)) 100%, 0 100%, 0 var(--cyber-cut));
  /* Inset fill cut must shrink with the inset; matching cuts create visible triangular artifacts. */
  --cyber-inner-cut: calc(var(--cyber-cut) - var(--cyber-inset));
  --cyber-inner-shape: polygon(var(--cyber-inner-cut) 0, 100% 0, 100% calc(100% - var(--cyber-inner-cut)), calc(100% - var(--cyber-inner-cut)) 100%, 0 100%, 0 var(--cyber-inner-cut));
  --cyber-trace-offset: -400ms;
  --cyber-cloud-offset: -1200ms;
  --cyber-press-ms: 920ms;
  isolation: isolate;
  position: relative;
  z-index: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  outline: 0 solid transparent;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
  transform: translateZ(0);
  transition:
    transform 190ms cubic-bezier(.2, .9, .2, 1),
    filter 240ms cubic-bezier(.2, .9, .2, 1),
    color 180ms cubic-bezier(.2, .9, .2, 1);
}

.button.cyber-button,
.nav-action.cyber-button,
.modal-close.cyber-button {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.cyber-button::before,
.cyber-button::after {
  position: absolute;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
  clip-path: var(--cyber-shape);
}

.cyber-button::before {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 54%, transparent), rgba(255, 255, 255, .16), color-mix(in srgb, var(--cyber-accent-2) 44%, transparent));
  opacity: .68;
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--cyber-accent) 18%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--cyber-accent) 12%, transparent));
  transition:
    opacity 220ms cubic-bezier(.2, .9, .2, 1),
    filter 260ms cubic-bezier(.2, .9, .2, 1);
}

.cyber-button::after {
  inset: var(--cyber-inset);
  z-index: -1;
  clip-path: var(--cyber-inner-shape);
  background:
    radial-gradient(circle at 22% 8%, color-mix(in srgb, var(--cyber-accent) 34%, transparent), transparent 30%),
    radial-gradient(circle at 84% 72%, color-mix(in srgb, var(--cyber-accent-2) 24%, transparent), transparent 35%),
    linear-gradient(115deg, rgba(255, 255, 255, .16), transparent 27% 70%, rgba(255, 255, 255, .08)),
    linear-gradient(180deg, var(--cyber-surface-a), var(--cyber-surface-b)),
    linear-gradient(var(--cyber-surface-b), var(--cyber-surface-b));
  background-size: 160% 160%, 150% 150%, 180% 180%, 100% 100%, 100% 100%;
  animation: cyberSurfaceClouds 10.5s ease-in-out infinite;
  animation-delay: var(--cyber-cloud-offset);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  filter: brightness(1) saturate(1);
  transition:
    filter 420ms cubic-bezier(.18, .84, .22, 1),
    box-shadow 520ms cubic-bezier(.18, .84, .22, 1);
}

.cyber-button--trace::before {
  /* Trace lives on the clipped shell behind an opaque inset fill; no visible sunburst in the body. */
  background:
    conic-gradient(
      from var(--cyber-trace-angle) at 50% 50%,
      transparent 0deg,
      transparent 38deg,
      color-mix(in srgb, var(--cyber-accent) 76%, transparent) 54deg,
      rgba(255, 255, 255, .68) 64deg,
      color-mix(in srgb, var(--cyber-accent-2) 70%, transparent) 76deg,
      transparent 94deg,
      transparent 212deg,
      color-mix(in srgb, var(--cyber-accent) 68%, transparent) 228deg,
      rgba(255, 255, 255, .5) 236deg,
      transparent 254deg,
      transparent 360deg
    ),
    linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 38%, transparent), rgba(255, 255, 255, .1), color-mix(in srgb, var(--cyber-accent-2) 30%, transparent));
  opacity: .78;
  filter:
    drop-shadow(0 0 6px var(--cyber-glow))
    drop-shadow(0 0 15px color-mix(in srgb, var(--cyber-accent) 18%, transparent));
  animation: cyberTrace 25.2s linear infinite;
  animation-delay: var(--cyber-trace-offset);
}

.cyber-button--trace::after {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cyber-accent) 34%, var(--cyber-base-solid)),
      color-mix(in srgb, var(--cyber-accent-2) 18%, var(--cyber-base-solid)) 68%,
      var(--cyber-base-solid)
    ),
    linear-gradient(var(--cyber-base-solid), var(--cyber-base-solid));
  background-size: 100% 100%, 100% 100%;
  animation: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cyber-accent) 24%, rgba(255, 255, 255, .08)),
    inset 0 0 26px color-mix(in srgb, var(--cyber-accent) 16%, transparent),
    inset 0 -18px 38px color-mix(in srgb, var(--cyber-accent-2) 14%, transparent);
}

.cyber-button > * {
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

.cyber-button > .cyber-content {
  pointer-events: none;
}

.cyber-button > .cyber-flash,
.cyber-button > .cyber-edge-flash,
.cyber-button > .cyber-shockwave {
  position: absolute;
  pointer-events: none;
}

.cyber-button > .cyber-flash {
  inset: var(--cyber-inset);
  z-index: 0;
  clip-path: var(--cyber-inner-shape);
  opacity: 0;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--cyber-accent) 52%, rgba(255, 255, 255, .36)), transparent 62%),
    linear-gradient(90deg, color-mix(in srgb, var(--cyber-accent) 46%, transparent), color-mix(in srgb, var(--cyber-accent-2) 42%, transparent));
  box-shadow: none;
}

.cyber-button > .cyber-edge-flash {
  inset: 0;
  z-index: 0;
  clip-path: var(--cyber-shape);
  opacity: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 72%, transparent), rgba(255, 255, 255, .28), color-mix(in srgb, var(--cyber-accent-2) 54%, transparent));
}

.cyber-button > .cyber-shockwave {
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cyber-accent) 54%, transparent), transparent 66%);
  filter: blur(8px);
  opacity: 0;
  transform: scale(1);
}

.cyber-button:not(:disabled):focus-visible,
.cyber-button.is-cyber-touching:not(:disabled) {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.16) saturate(1.22);
  border-color: transparent;
  outline: 0;
}

.cyber-button:not(:disabled):focus-visible::before,
.cyber-button.is-cyber-touching:not(:disabled)::before {
  opacity: .98;
  filter:
    drop-shadow(0 0 18px var(--cyber-glow))
    drop-shadow(0 0 52px color-mix(in srgb, var(--cyber-accent) 58%, transparent))
    drop-shadow(0 0 86px color-mix(in srgb, var(--cyber-accent) 28%, transparent));
}

.cyber-button:not(:disabled):focus-visible::after,
.cyber-button.is-cyber-touching:not(:disabled)::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .24),
    inset 0 0 32px color-mix(in srgb, var(--cyber-accent) 42%, transparent),
    inset 0 -18px 46px color-mix(in srgb, var(--cyber-accent-2) 30%, transparent);
  filter: brightness(1.32) saturate(1.38);
}

.cyber-button.is-cyber-recovering:not(:disabled):focus-visible {
  transform: translateY(-3px) scale(1.008);
  filter: brightness(1.15) saturate(1.2);
  transition-duration: 360ms, 420ms, 260ms;
}

.cyber-button.is-cyber-recovering:not(:disabled):focus-visible::before {
  opacity: .94;
  filter:
    drop-shadow(0 0 16px var(--cyber-glow))
    drop-shadow(0 0 46px color-mix(in srgb, var(--cyber-accent) 50%, transparent))
    drop-shadow(0 0 74px color-mix(in srgb, var(--cyber-accent) 22%, transparent));
  transition-duration: 420ms, 460ms;
}

.cyber-button.is-cyber-recovering:not(:disabled):focus-visible::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 0 28px color-mix(in srgb, var(--cyber-accent) 36%, transparent),
    inset 0 -16px 40px color-mix(in srgb, var(--cyber-accent-2) 26%, transparent);
  filter: brightness(1.24) saturate(1.3);
  transition-duration: 460ms, 520ms;
}

@media (any-hover: hover) and (any-pointer: fine) {
  .cyber-button:not(:disabled):hover {
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.16) saturate(1.22);
    border-color: transparent;
    outline: 0;
  }

  .cyber-button:not(:disabled):hover::before {
    opacity: .98;
    filter:
      drop-shadow(0 0 18px var(--cyber-glow))
      drop-shadow(0 0 52px color-mix(in srgb, var(--cyber-accent) 58%, transparent))
      drop-shadow(0 0 86px color-mix(in srgb, var(--cyber-accent) 28%, transparent));
  }

  .cyber-button:not(:disabled):hover::after {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .24),
      inset 0 0 32px color-mix(in srgb, var(--cyber-accent) 42%, transparent),
      inset 0 -18px 46px color-mix(in srgb, var(--cyber-accent-2) 30%, transparent);
    filter: brightness(1.32) saturate(1.38);
  }

  .cyber-button.is-cyber-recovering:not(:disabled):hover {
    transform: translateY(-3px) scale(1.008);
    filter: brightness(1.15) saturate(1.2);
    transition-duration: 360ms, 420ms, 260ms;
  }

  .cyber-button.is-cyber-recovering:not(:disabled):hover::before {
    opacity: .94;
    filter:
      drop-shadow(0 0 16px var(--cyber-glow))
      drop-shadow(0 0 46px color-mix(in srgb, var(--cyber-accent) 50%, transparent))
      drop-shadow(0 0 74px color-mix(in srgb, var(--cyber-accent) 22%, transparent));
    transition-duration: 420ms, 460ms;
  }

  .cyber-button.is-cyber-recovering:not(:disabled):hover::after {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .2),
      inset 0 0 28px color-mix(in srgb, var(--cyber-accent) 36%, transparent),
      inset 0 -16px 40px color-mix(in srgb, var(--cyber-accent-2) 26%, transparent);
    filter: brightness(1.24) saturate(1.3);
    transition-duration: 460ms, 520ms;
  }
}

.cyber-button.is-cyber-pressed {
  animation: cyberPressShell var(--cyber-press-ms) cubic-bezier(.15, .9, .2, 1) both;
}

.cyber-button.is-cyber-flashing {
  color: #fff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, .34),
    0 0 20px color-mix(in srgb, var(--cyber-accent) 30%, transparent);
  animation: cyberTextFlash var(--cyber-press-ms) cubic-bezier(.15, .9, .2, 1) both;
}

.cyber-button.is-cyber-flashing > .cyber-flash {
  animation: cyberColorBloom var(--cyber-press-ms) cubic-bezier(.13, .88, .2, 1) both;
}

.cyber-button.is-cyber-flashing > .cyber-edge-flash {
  animation: cyberEdgeSurge var(--cyber-press-ms) cubic-bezier(.15, .9, .2, 1) both;
}

.cyber-button.is-cyber-flashing > .cyber-shockwave {
  animation: cyberShockwave var(--cyber-press-ms) cubic-bezier(.12, .78, .2, 1) both;
}

.cyber-button--plasma {
  --cyber-accent: var(--accent-magenta);
  --cyber-accent-2: var(--accent-violet);
  --cyber-glow: rgba(237, 0, 255, 0.38);
  --cyber-surface-a: rgba(104, 28, 128, 0.9);
  --cyber-surface-b: rgba(18, 16, 46, 0.97);
  --cyber-base-solid: #150f30;
  --cyber-trace-offset: -1800ms;
}

.cyber-button--ion {
  --cyber-accent: var(--accent-cyan);
  --cyber-accent-2: #bffefa;
  --cyber-glow: rgba(83, 225, 255, 0.34);
  --cyber-surface-a: rgba(12, 78, 92, 0.82);
  --cyber-surface-b: rgba(6, 22, 32, 0.96);
  --cyber-base-solid: #061620;
  --cyber-trace-offset: -3600ms;
}

.cyber-button--offer {
  min-height: 58px;
  padding: .92rem 1.1rem;
}

.cyber-button--utility {
  --cyber-cut: 12px;
  min-height: 42px;
  padding-inline: 18px;
}

.cyber-button--low {
  --cyber-cut: 14px;
  min-height: 50px;
  color: var(--cyber-accent);
  background: transparent;
  filter: saturate(.98);
}

.cyber-button--low::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyber-accent) 86%, transparent), rgba(255, 255, 255, .1), color-mix(in srgb, var(--cyber-accent-2) 58%, transparent));
  filter:
    drop-shadow(0 0 7px var(--cyber-glow))
    drop-shadow(0 0 22px color-mix(in srgb, var(--cyber-accent) 28%, transparent));
  animation: cyberLowPulse 6.2s ease-in-out infinite;
}

.cyber-button--low::after {
  background:
    radial-gradient(ellipse at 50% 116%, color-mix(in srgb, var(--cyber-accent) 13%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(5, 9, 15, .58), rgba(4, 6, 12, .72));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cyber-accent) 13%, transparent),
    inset 0 0 22px rgba(0, 0, 0, .36);
}

.nav-action.cyber-button {
  min-width: 132px;
  min-height: 42px;
  height: 42px;
}

.hero {
  min-height: 590px;
  height: min(690px, calc(100svh - 145px));
}

.modal-close.cyber-button {
  --cyber-cut: 0px;
  --cyber-inset: 1px;
  position: absolute;
  right: 18px;
  left: auto;
  top: 16px;
  min-width: 44px;
  width: 44px;
  min-height: 36px;
  padding: 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1;
}

.modal-close.cyber-button::before {
  opacity: .92;
  background:
    linear-gradient(135deg, rgba(83, 225, 255, .84), rgba(255, 255, 255, .14), rgba(83, 225, 255, .48)),
    linear-gradient(180deg, rgba(13, 52, 60, .98), rgba(6, 19, 24, .98));
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--cyber-accent) 34%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--cyber-accent) 18%, transparent));
}

.modal-close.cyber-button::after {
  inset: 2px;
  clip-path: none;
  background:
    radial-gradient(circle at 32% 16%, rgba(83, 225, 255, .18), transparent 42%),
    linear-gradient(180deg, rgba(18, 48, 56, .99), rgba(9, 24, 30, 1));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 0 16px rgba(83, 225, 255, .14);
}

@keyframes cyberTrace {
  to {
    --cyber-trace-angle: 360deg;
  }
}

@keyframes cyberSurfaceClouds {
  0%,
  100% {
    background-position: 18% 12%, 82% 76%, 0% 50%, 50% 50%, 50% 50%;
  }

  42% {
    background-position: 44% 24%, 58% 92%, 52% 50%, 50% 50%, 50% 50%;
  }

  68% {
    background-position: 12% 64%, 92% 36%, 100% 50%, 50% 50%, 50% 50%;
  }
}

@keyframes cyberPressShell {
  0% {
    transform: translateZ(0) scale(.985);
  }

  26% {
    transform: translateZ(0) scale(1.018);
  }

  100% {
    transform: translateZ(0) scale(1);
  }
}

@keyframes cyberTextFlash {
  0%,
  100% {
    color: #fff;
    text-shadow:
      0 0 10px rgba(255, 255, 255, .34),
      0 0 18px color-mix(in srgb, var(--cyber-accent) 28%, transparent);
  }

  30% {
    color: #fff;
    text-shadow:
      0 0 14px rgba(255, 255, 255, .52),
      0 0 30px color-mix(in srgb, var(--cyber-accent) 42%, transparent);
  }

  64% {
    color: #fff;
    text-shadow:
      0 0 12px rgba(255, 255, 255, .5),
      0 0 26px color-mix(in srgb, var(--cyber-accent) 46%, transparent);
  }
}

@keyframes cyberEdgeSurge {
  0% {
    opacity: 0;
    filter:
      drop-shadow(0 0 0 color-mix(in srgb, var(--cyber-accent) 0%, transparent));
  }

  34% {
    opacity: .86;
    filter:
      drop-shadow(0 0 24px color-mix(in srgb, var(--cyber-accent) 94%, transparent))
      drop-shadow(0 0 76px color-mix(in srgb, var(--cyber-accent) 64%, transparent))
      drop-shadow(0 0 120px color-mix(in srgb, var(--cyber-accent-2) 36%, transparent));
  }

  100% {
    opacity: 0;
    filter:
      drop-shadow(0 0 18px color-mix(in srgb, var(--cyber-accent) 18%, transparent));
  }
}

@keyframes cyberColorBloom {
  0% {
    opacity: 0;
    transform: scale(.98);
    filter: brightness(1.08) saturate(1.12);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .1),
      inset 0 0 18px color-mix(in srgb, var(--cyber-accent) 22%, transparent);
  }

  32% {
    opacity: .9;
    transform: scale(1.015);
    filter: brightness(1.48) saturate(1.58);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .32),
      inset 0 0 34px color-mix(in srgb, var(--cyber-accent) 54%, transparent),
      inset 0 -18px 58px color-mix(in srgb, var(--cyber-accent-2) 42%, transparent);
  }

  58% {
    opacity: .42;
    transform: scale(1.006);
    filter: brightness(1.26) saturate(1.34);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .18),
      inset 0 0 24px color-mix(in srgb, var(--cyber-accent) 34%, transparent);
  }

  100% {
    opacity: 0;
    transform: scale(1);
    filter: brightness(1) saturate(1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  }
}

@keyframes cyberShockwave {
  0% {
    opacity: 0;
    transform: scale(1);
    filter: blur(0);
  }

  18% {
    opacity: .95;
    transform: scale(1);
    filter: blur(3px);
  }

  100% {
    opacity: 0;
    transform: scale(1.58);
    filter: blur(30px);
  }
}

@keyframes cyberLowPulse {
  0%,
  100% {
    opacity: .68;
    filter:
      drop-shadow(0 0 5px var(--cyber-glow))
      drop-shadow(0 0 13px color-mix(in srgb, var(--cyber-accent) 18%, transparent));
  }

  48% {
    opacity: .9;
    filter:
      drop-shadow(0 0 9px var(--cyber-glow))
      drop-shadow(0 0 26px color-mix(in srgb, var(--cyber-accent) 34%, transparent));
  }
}

@media (max-width: 900px) {
  .nav-action.cyber-button {
    min-width: 86px;
  }
}