
/* Homepage button style test v3: carbon-fiber + neon cycling text
   Official Critical Graffix logo and official affiliation logos remain unchanged. */

.cg-hero-actions .btn,
.cg-section-head .btn,
.cg-final-cta > .btn,
.navbar .cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 16px 30px;
  border: 1px solid rgba(180, 190, 198, .42) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(110,116,122,.22) 0%, rgba(255,255,255,.05) 9%, rgba(24,27,31,.96) 13%, rgba(18,20,24,.98) 100%) !important;
  color: #dff8ff !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .84rem !important;
  font-weight: 700;
  line-height: 1;
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 10px 22px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.05) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.cg-hero-actions .btn::before,
.cg-section-head .btn::before,
.cg-final-cta > .btn::before,
.navbar .cta::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: inherit;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 20%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.045) 0 6px,
      rgba(24,26,29,.0) 6px 12px),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,.28) 0 6px,
      rgba(255,255,255,.015) 6px 12px),
    linear-gradient(180deg, rgba(34,37,42,.98), rgba(14,16,20,.98));
  background-blend-mode: screen, normal, multiply, normal;
  z-index: -2;
}

.cg-hero-actions .btn::after,
.cg-section-head .btn::after,
.cg-final-cta > .btn::after,
.navbar .cta::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 14%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 25%, transparent 72%, rgba(0,0,0,.24));
  opacity: .9;
  z-index: -1;
  pointer-events: none;
}

.cg-hero-actions .btn .label,
.cg-section-head .btn .label,
.cg-final-cta > .btn .label,
.navbar .cta .label {
  position: relative;
  z-index: 2;
  color: #60efff;
  text-shadow:
    0 0 4px rgba(96,239,255,.75),
    0 0 10px rgba(96,239,255,.45),
    0 0 18px rgba(96,239,255,.18);
  animation: cgNeonTextCycle 9s linear infinite, cgNeonPulse 2.3s ease-in-out infinite;
}

.cg-hero-actions .btn .label::after,
.cg-section-head .btn .label::after,
.cg-final-cta > .btn .label::after,
.navbar .cta .label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 58%;
  height: 1px;
  transform: translateX(-50%);
  background: currentColor;
  opacity: .32;
  box-shadow: 0 0 10px currentColor;
}

@keyframes cgNeonTextCycle {
  0%, 14% {
    color: #5cf2ff;
    text-shadow: 0 0 4px rgba(92,242,255,.78), 0 0 10px rgba(92,242,255,.52), 0 0 18px rgba(92,242,255,.22);
  }
  20%, 34% {
    color: #7dff4d;
    text-shadow: 0 0 4px rgba(125,255,77,.78), 0 0 10px rgba(125,255,77,.52), 0 0 18px rgba(125,255,77,.22);
  }
  40%, 54% {
    color: #4ea5ff;
    text-shadow: 0 0 4px rgba(78,165,255,.78), 0 0 10px rgba(78,165,255,.52), 0 0 18px rgba(78,165,255,.24);
  }
  60%, 74% {
    color: #ff4db1;
    text-shadow: 0 0 4px rgba(255,77,177,.76), 0 0 10px rgba(255,77,177,.50), 0 0 18px rgba(255,77,177,.24);
  }
  80%, 100% {
    color: #ffd35a;
    text-shadow: 0 0 4px rgba(255,211,90,.76), 0 0 10px rgba(255,211,90,.50), 0 0 18px rgba(255,211,90,.24);
  }
}

@keyframes cgNeonPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

.cg-hero-actions .btn:hover,
.cg-section-head .btn:hover,
.cg-final-cta > .btn:hover,
.navbar .cta:hover,
.cg-hero-actions .btn:focus-visible,
.cg-section-head .btn:focus-visible,
.cg-final-cta > .btn:focus-visible,
.navbar .cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.62),
    0 12px 28px rgba(0,0,0,.34),
    0 0 22px rgba(110, 160, 190, .14) !important;
}

.cg-hero-actions .btn:hover::after,
.cg-section-head .btn:hover::after,
.cg-final-cta > .btn:hover::after,
.navbar .cta:hover::after,
.cg-hero-actions .btn:focus-visible::after,
.cg-section-head .btn:focus-visible::after,
.cg-final-cta > .btn:focus-visible::after,
.navbar .cta:focus-visible::after {
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.23) 16%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 22%, transparent 72%, rgba(0,0,0,.28));
}

/* Keep navbar CTA right-justified */
.navbar .cta {
  margin-left: auto;
  min-width: 220px;
  flex: 0 0 auto;
  z-index: 5;
}

.nav-inner {
  display: flex;
  align-items: center;
}

.nav-links {
  flex: 0 1 auto;
  justify-content: center;
}

.cg-hero-actions .btn { min-width: 238px; }
.cg-section-head .btn { min-width: 215px; }
.cg-final-cta > .btn { min-width: 260px; }

/* Slightly calmer footer affiliation cards; logos unchanged */
.cg-footer-affiliation {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(0,229,255,.16),
    0 8px 20px rgba(0,0,0,.24);
}

@media (prefers-reduced-motion: reduce) {
  .cg-hero-actions .btn .label,
  .cg-section-head .btn .label,
  .cg-final-cta > .btn .label,
  .navbar .cta .label {
    animation: none;
    color: #5cf2ff;
    text-shadow: 0 0 5px rgba(92,242,255,.4);
  }
}

@media (max-width: 900px) {
  .navbar .cta { display: none; }
  .cg-hero-actions .btn,
  .cg-section-head .btn,
  .cg-final-cta > .btn {
    min-width: 0;
    width: 100%;
  }
}



/* Critical Graffix Carbon Neon Button Final Refinement */

.cg-hero-actions .btn .label,
.cg-section-head .btn .label,
.cg-final-cta > .btn .label,
.navbar .cta .label {
    animation: none;
    color: #5cf2ff;
    text-shadow:
      0 0 5px rgba(92,242,255,.8),
      0 0 12px rgba(92,242,255,.35);
}

/* Primary action: cyan idle, green hover */
.btn-primary .label,
.navbar .cta .label {
    color: #5cf2ff;
}

.btn-primary:hover .label,
.navbar .cta:hover .label {
    color: #7dff4d;
    text-shadow:
      0 0 6px rgba(125,255,77,.85),
      0 0 16px rgba(125,255,77,.45);
}

/* Secondary actions: cyan hover only */
.btn-secondary .label {
    color: #dff8ff;
}

.btn-secondary:hover .label {
    color: #5cf2ff;
}

/* Final CTA gets a very slow breathing effect */
.cg-final-cta > .btn .label {
    animation: cgFinalCtaBreath 6s ease-in-out infinite;
}

@keyframes cgFinalCtaBreath {
    0%,100% {
        text-shadow:
          0 0 5px rgba(92,242,255,.65),
          0 0 12px rgba(92,242,255,.3);
    }
    50% {
        text-shadow:
          0 0 8px rgba(125,255,77,.8),
          0 0 20px rgba(125,255,77,.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg-final-cta > .btn .label {
        animation: none;
    }
}


/* Site-specific link buttons mapped to the exact homepage carbon-neon button system. */
.cg-service-link,
.cg-terms-link,
.cg-pay-btn,
.paypal-btn,
.venmo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 16px 30px;
  border: 1px solid rgba(180,190,198,.42) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg,rgba(110,116,122,.22) 0%,rgba(255,255,255,.05) 9%,rgba(24,27,31,.96) 13%,rgba(18,20,24,.98) 100%) !important;
  color: #dff8ff !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .84rem !important;
  font-weight: 700;
  line-height: 1;
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.55), 0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.05) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.cg-service-link::before,.cg-terms-link::before,.cg-pay-btn::before,.paypal-btn::before,.venmo-btn::before {
  content:""; position:absolute; inset:1px; clip-path:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,0) 20%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 6px,rgba(24,26,29,0) 6px 12px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.28) 0 6px,rgba(255,255,255,.015) 6px 12px),
    linear-gradient(180deg,rgba(34,37,42,.98),rgba(14,16,20,.98));
  background-blend-mode:screen,normal,multiply,normal; z-index:-2;
}
.cg-service-link::after,.cg-terms-link::after,.cg-pay-btn::after,.paypal-btn::after,.venmo-btn::after {
  content:""; position:absolute; inset:0; clip-path:inherit;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.18) 14%,rgba(255,255,255,0) 28%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 25%,transparent 72%,rgba(0,0,0,.24));
  opacity:.9; z-index:-1; pointer-events:none;
}
.cg-service-link .label,.cg-terms-link .label,.cg-pay-btn .label,.paypal-btn .label,.venmo-btn .label {
  position:relative; z-index:2; color:#5cf2ff;
  text-shadow:0 0 5px rgba(92,242,255,.8),0 0 12px rgba(92,242,255,.35);
}
.cg-service-link:hover,.cg-terms-link:hover,.cg-pay-btn:hover,.paypal-btn:hover,.venmo-btn:hover {
  transform:translateY(-2px); filter:brightness(1.06);
}
.cg-service-link:hover .label,.cg-terms-link:hover .label,.cg-pay-btn:hover .label,.paypal-btn:hover .label,.venmo-btn:hover .label {
  color:#7dff4d; text-shadow:0 0 6px rgba(125,255,77,.85),0 0 16px rgba(125,255,77,.45);
}


/* Wedding services CTA alignment: match navbar START A PROJECT button */
.wedding-primary-cta {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px !important;
  padding: 16px 30px !important;
  border: 1px solid rgba(180, 190, 198, .42) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(110,116,122,.22) 0%, rgba(255,255,255,.05) 9%, rgba(24,27,31,.96) 13%, rgba(18,20,24,.98) 100%) !important;
  color: #dff8ff !important;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .84rem !important;
  font-weight: 700;
  line-height: 1;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.55), 0 10px 22px rgba(0,0,0,.28);
}

.wedding-primary-cta .label {
  color: #60efff;
  text-transform: uppercase;
  letter-spacing: .11em;
}
