:root {
  --pivot-green: #00d889;
  --pivot-green-bright: #58ffc4;
  --pivot-green-deep: #007a4d;
  --pivot-silver: #e9eff0;
  --pivot-steel: #9ba8ac;
  --pivot-graphite: #181d1e;
  --pivot-charcoal: #252b2d;
  --pivot-ink: #050b0a;
  --pivot-support: #aab8b5;
  --pivot-blue: #4eb7ff;
}

html[data-pivot-brand="true"] body {
  background-color: var(--pivot-ink);
}

html[data-pivot-brand="true"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 18%, rgba(0, 216, 137, 0.11), transparent 28%),
    radial-gradient(circle at 88% 24%, rgba(78, 183, 255, 0.08), transparent 31%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(15deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    linear-gradient(135deg, #07110f 0%, #101617 54%, #071116 100%);
  background-size: auto, auto, 58px 58px, 74px 74px, auto;
}

html[data-pivot-brand="true"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(90deg, transparent 0 12%, rgba(185, 199, 202, 0.12) 12% 12.08%, transparent 12.08% 100%),
    linear-gradient(0deg, transparent 0 68%, rgba(185, 199, 202, 0.1) 68% 68.08%, transparent 68.08% 100%);
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.pivot-gauge-mark {
  --pivot-mark-size: 4.25rem;
  display: inline-grid;
  width: var(--pivot-mark-size);
  height: var(--pivot-mark-size);
  place-items: center;
  flex: 0 0 auto;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.38));
}

.pivot-gauge-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pivot-loader-mark {
  position: relative;
  display: grid;
  width: clamp(7.5rem, 18vw, 12.5rem);
  aspect-ratio: 1;
  margin: 0 auto 1.15rem;
  place-items: center;
  border: 1px solid rgba(88, 255, 196, 0.2);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 216, 137, 0.12), transparent 62%),
    rgba(3, 15, 13, 0.58);
  box-shadow: inset 0 0 35px rgba(0, 216, 137, 0.08), 0 20px 55px rgba(0, 0, 0, 0.42);
}

.pivot-loader-mark::before,
.pivot-loader-mark::after {
  content: "";
  position: absolute;
  inset: -0.7rem;
  border: 1px solid rgba(0, 216, 137, 0.16);
  border-radius: 50%;
  border-top-color: var(--pivot-green);
  animation: pivot-ring-spin 9s linear infinite;
}

.pivot-loader-mark::after {
  inset: -1.15rem;
  border-color: rgba(185, 199, 202, 0.12);
  border-bottom-color: rgba(233, 239, 240, 0.55);
  animation-direction: reverse;
  animation-duration: 14s;
}

.pivot-loader-mark img {
  display: block;
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(0, 216, 137, 0.28));
}

.brand-mark img,
.boot-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-mark {
  overflow: hidden;
}

.brand-mark .pivot-gauge-mark {
  --pivot-mark-size: 76%;
  max-width: 76%;
  max-height: 76%;
}

.pivot-gauge-needle {
  transform-box: view-box;
  transform-origin: 79px 82px;
  animation: pivot-needle-idle 4.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

.boot-mark .pivot-gauge-needle,
.login-loader-brand .pivot-gauge-needle {
  animation: pivot-needle-sweep 1.8s cubic-bezier(.18, .8, .22, 1) both, pivot-needle-idle 4.6s 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.pivot-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.72rem, 1.5vw, 1.2rem);
  min-width: 0;
}

.pivot-brand-lockup .pivot-gauge-mark {
  --pivot-mark-size: clamp(4.25rem, 9vw, 7.5rem);
}

.pivot-brand-lockup.is-compact .pivot-gauge-mark {
  --pivot-mark-size: 2.8rem;
}

.pivot-wordmark {
  display: grid;
  gap: 0.18rem;
  line-height: 1;
}

.pivot-wordmark strong {
  color: var(--pivot-silver);
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  font-weight: 850;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-shadow: 0 1px 0 #fff, 0 14px 35px rgba(0, 0, 0, 0.46);
}

.pivot-brand-lockup.is-compact .pivot-wordmark strong {
  font-size: 1.08rem;
  letter-spacing: 0.16em;
}

.pivot-wordmark small {
  color: var(--pivot-steel);
  font-size: clamp(0.56rem, 1.25vw, 0.82rem);
  font-weight: 750;
  letter-spacing: 0.31em;
  text-transform: uppercase;
}

.pivot-wordmark small em {
  color: var(--pivot-green);
  font-style: normal;
}

.pivot-brand-support {
  display: block;
  color: var(--pivot-support);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.pivot-supported-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--pivot-support);
}

.pivot-supported-footer::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--pivot-green);
  box-shadow: 0 0 10px rgba(0, 216, 137, 0.75);
}

@keyframes pivot-needle-sweep {
  0% { transform: rotate(-72deg); opacity: 0.45; }
  58% { transform: rotate(18deg); opacity: 1; }
  76% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

@keyframes pivot-needle-idle {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(2deg); }
}

@keyframes pivot-ring-spin {
  to { transform: rotate(360deg); }
}

html[data-performance-mode="on"] .pivot-gauge-needle,
html[data-motion="reduced"] .pivot-gauge-needle,
html[data-performance-mode="on"] .pivot-loader-mark::before,
html[data-performance-mode="on"] .pivot-loader-mark::after,
html[data-motion="reduced"] .pivot-loader-mark::before,
html[data-motion="reduced"] .pivot-loader-mark::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pivot-gauge-needle,
  .pivot-loader-mark::before,
  .pivot-loader-mark::after { animation: none !important; }
}

@media (max-width: 720px) {
  .pivot-brand-lockup { flex-direction: column; text-align: center; }
  .pivot-wordmark small { letter-spacing: 0.19em; }
}