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

.home-page .cg-hero-actions .btn,
.home-page .cg-section-head .btn,
.home-page .cg-final-cta > .btn,
.home-page .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;
}

.home-page .cg-hero-actions .btn::before,
.home-page .cg-section-head .btn::before,
.home-page .cg-final-cta > .btn::before,
.home-page .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;
}

.home-page .cg-hero-actions .btn::after,
.home-page .cg-section-head .btn::after,
.home-page .cg-final-cta > .btn::after,
.home-page .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;
}

.home-page .cg-hero-actions .btn .label,
.home-page .cg-section-head .btn .label,
.home-page .cg-final-cta > .btn .label,
.home-page .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;
}

.home-page .cg-hero-actions .btn .label::after,
.home-page .cg-section-head .btn .label::after,
.home-page .cg-final-cta > .btn .label::after,
.home-page .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); }
}

.home-page .cg-hero-actions .btn:hover,
.home-page .cg-section-head .btn:hover,
.home-page .cg-final-cta > .btn:hover,
.home-page .navbar .cta:hover,
.home-page .cg-hero-actions .btn:focus-visible,
.home-page .cg-section-head .btn:focus-visible,
.home-page .cg-final-cta > .btn:focus-visible,
.home-page .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;
}

.home-page .cg-hero-actions .btn:hover::after,
.home-page .cg-section-head .btn:hover::after,
.home-page .cg-final-cta > .btn:hover::after,
.home-page .navbar .cta:hover::after,
.home-page .cg-hero-actions .btn:focus-visible::after,
.home-page .cg-section-head .btn:focus-visible::after,
.home-page .cg-final-cta > .btn:focus-visible::after,
.home-page .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 */
.home-page .navbar .cta {
  margin-left: auto;
  min-width: 220px;
  flex: 0 0 auto;
  z-index: 5;
}

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

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

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

/* Slightly calmer footer affiliation cards; logos unchanged */
.home-page .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) {
  .home-page .cg-hero-actions .btn .label,
  .home-page .cg-section-head .btn .label,
  .home-page .cg-final-cta > .btn .label,
  .home-page .navbar .cta .label {
    animation: none;
    color: #5cf2ff;
    text-shadow: 0 0 5px rgba(92,242,255,.4);
  }
}

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