/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Base body ── */
body {
  background: #000;
  font-family: 'Arial Black', 'Impact', sans-serif;
}

/* ── Starfield canvas ── */
#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

/* ── Shared animations ── */
@keyframes colorCycle {
  0%   { color: #ff5577; }
  14%  { color: #ff9944; }
  28%  { color: #ffe566; }
  42%  { color: #44ffaa; }
  57%  { color: #44d4ff; }
  71%  { color: #b44dff; }
  85%  { color: #ff44d4; }
  100% { color: #ff5577; }
}

@keyframes colorCycle2 {
  0%   { color: #44d4ff; }
  14%  { color: #b44dff; }
  28%  { color: #ff44d4; }
  42%  { color: #ff5577; }
  57%  { color: #ff9944; }
  71%  { color: #ffe566; }
  85%  { color: #44ffaa; }
  100% { color: #44d4ff; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.04); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Spinning ring decorations ── */
.ring-wrap {
  position: absolute;
  animation: spin 12s linear infinite;
  pointer-events: none;
}

.ring-wrap svg {
  width: 100%;
  height: 100%;
}

.ring-wrap-rev {
  animation-direction: reverse;
  animation-duration: 8s;
}

/* ── Glowing logo text ── */
.logo {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: colorCycle 4s linear infinite, pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 18px currentColor) drop-shadow(0 0 50px currentColor);
}

/* ── Domain watermark ── */
.domain {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: clamp(0.8rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.15em;
  text-transform: lowercase;
  pointer-events: none;
}

/* ── Back link ── */
.back-link {
  position: fixed;
  top: 1.2rem;
  left: 1.6rem;
  z-index: 30;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.back-link:hover {
  color: #fff;
}

/* ── Page header (products & product pages) ── */
.header {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}