/* Shared polish for static public pages. Keep invoice maker unlinked. */
:root {
  --chrome-black: #030306;
  --chrome-silver: #cfd4d8;
  --signal-red: #ff0033;
  --signal-yellow: #ffcc00;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 0, 51, 0.16), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(255, 204, 0, 0.08), transparent 20rem),
    linear-gradient(180deg, #050507 0%, #0a0a0f 42%, #030306 100%) !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.024) 0 1px, transparent 1px 5px);
  background-size: 48px 48px, 48px 48px, auto;
  opacity: 0.5;
}

.page-header,
.card,
.service-card,
.media-frame,
.service-mega,
.social-link,
form,
.scan {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), transparent 18%),
    linear-gradient(180deg, rgba(11, 11, 16, 0.92), rgba(1, 1, 3, 0.94)) !important;
  border-color: rgba(207, 212, 216, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(255, 0, 51, 0.11),
    0 22px 50px rgba(0,0,0,0.32) !important;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.page-header {
  position: relative;
  overflow: hidden;
}

.page-header::after,
.card::after,
.service-card::after,
.media-frame::after {
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207, 212, 216, 0.8), rgba(255, 0, 51, 0.72), transparent);
  animation: chromeStaticSweep 4.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

.button,
.service-trigger,
.coming-tag,
.quiet-link {
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.neon-red {
  color: #ff2d42 !important;
  text-shadow: 0 0 10px rgba(255, 0, 51, 0.62), 0 0 32px rgba(255, 0, 51, 0.24) !important;
}

.neon-yellow {
  color: #ffcc00 !important;
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.48), 0 0 28px rgba(255, 204, 0, 0.14) !important;
}

.brand-mark .brand-hanzu,
.brand-mark .brand-tech {
  filter: drop-shadow(0 0 10px rgba(255, 0, 51, 0.24));
}

.top-nav a,
.nav-right a,
.service-link {
  transition: color 0.24s ease, border-color 0.24s ease, transform 0.24s ease, background-color 0.24s ease;
}

.top-nav,
.nav-right {
  gap: clamp(0.62rem, 1.1vw, 1rem) !important;
  max-width: min(48vw, 38rem);
  padding-right: clamp(0.25rem, 1vw, 0.8rem);
}

.top-nav a,
.nav-right a {
  font-size: clamp(0.74rem, 0.95vw, 0.88rem) !important;
  white-space: nowrap;
}

.top-nav a:hover,
.nav-right a:hover,
.service-link:hover {
  color: var(--chrome-silver) !important;
  transform: translateY(-1px);
}

@keyframes chromeStaticSweep {
  0% { opacity: 0; transform: translateX(-36%); }
  18% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(36%); }
}

@media (max-width: 900px) {
  .page-header,
  .card,
  .service-card,
  .media-frame,
  form {
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  }
}