:root {
  --red: #38bdf8;
  --red-2: #1d4ed8;
  --cyan: #67e8f9;
  --muted: #8b9bb6;
  --line: rgba(148, 197, 255, 0.16);
  --panel: rgba(8, 20, 43, 0.64);
}

html { background: #020611; }

body {
  position: relative;
  background:
    radial-gradient(ellipse 75% 58% at 14% -4%, rgba(14, 116, 255, 0.28), transparent 68%),
    radial-gradient(ellipse 58% 52% at 93% 23%, rgba(35, 207, 255, 0.17), transparent 68%),
    radial-gradient(ellipse 65% 45% at 44% 108%, rgba(16, 74, 190, 0.22), transparent 70%),
    linear-gradient(155deg, #02040b 0%, #061126 48%, #02050d 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -4;
  width: 46vw;
  min-width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.2;
  pointer-events: none;
}

body::before { left: -20vw; top: 18vh; background: #0756ff; }
body::after { right: -24vw; bottom: -20vh; background: #14d8ff; }

.app-shell::before {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(87, 179, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 179, 255, 0.07) 1px, transparent 1px);
}

.ambient { opacity: 0.16; filter: blur(120px); }
.ambient-one { background: #075cff; }
.ambient-two { background: #18c8ff; }

.site-header {
  background: rgba(2, 8, 20, 0.56);
  border-color: rgba(130, 191, 255, 0.13);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
}

.api-pill { display: none !important; }

.brand-mark {
  color: #dff8ff;
  background: linear-gradient(145deg, rgba(31, 137, 255, 0.92), rgba(4, 31, 82, 0.96));
  border-color: rgba(107, 210, 255, 0.55);
  box-shadow: 0 0 26px rgba(27, 140, 255, 0.32), inset 0 1px rgba(255, 255, 255, 0.24);
}

.brand > span:last-child {
  color: transparent;
  background: linear-gradient(90deg, #56d5ff 0%, #3b82f6 28%, #e0f7ff 50%, #2563eb 72%, #56d5ff 100%);
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: praetorBrandFlow 4.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 11px rgba(55, 181, 255, 0.18));
}

.brand b,
.brand small { color: inherit !important; }

.nav-links a.active,
.nav-links a:hover { color: #e9f8ff; }
.nav-links a::after { background: #38bdf8; box-shadow: 0 0 14px #38bdf8; }
.icon-button:hover,
.menu-button:hover { color: #67e8f9; border-color: rgba(56, 189, 248, 0.48); }

.eyebrow { color: #67d7ff; }
.eyebrow i,
.status-line i { background: #38bdf8; box-shadow: 0 0 12px #38bdf8; }

.hero-copy h1 span,
.page-hero h1 span {
  -webkit-text-stroke: 1px rgba(158, 222, 255, 0.66);
  background: linear-gradient(90deg, #bcecff, #3b82f6, #22d3ee, #d6f5ff, #2563eb);
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: blueTextFlow 7s ease-in-out infinite alternate;
}

.primary-button,
.obfuscate-button {
  background: linear-gradient(120deg, #0b4fce, #169ee9, #105ee8);
  background-size: 220% 100%;
  border-color: rgba(103, 232, 249, 0.65);
  box-shadow: 0 12px 38px rgba(11, 105, 228, 0.28), inset 0 1px rgba(255, 255, 255, 0.26);
  animation: blueButtonFlow 6s ease-in-out infinite alternate;
}

.primary-button:hover,
.obfuscate-button:hover:not(:disabled) {
  box-shadow: 0 18px 48px rgba(22, 158, 233, 0.4), 0 0 0 1px rgba(128, 225, 255, 0.18);
}

.secondary-button,
.glow-card,
.feature-group,
.hub-panel,
.current-preset,
.advanced-panel,
.result-panel,
.discord-obfuscate {
  background: linear-gradient(145deg, rgba(16, 43, 82, 0.52), rgba(3, 11, 27, 0.68));
  border-color: rgba(139, 204, 255, 0.15);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 22px 70px rgba(0, 6, 24, 0.26);
}

.glow-card:hover,
.feature-group:hover {
  border-color: rgba(70, 194, 255, 0.42);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 20px 55px rgba(0, 69, 173, 0.18);
}

.glow-card > svg,
.feature-icon,
.hub-stats svg,
.trust-row svg,
.footer svg,
.discord-benefits svg,
.discord-invite-note svg { color: #48c7ff; }

.feature-icon {
  border-color: rgba(77, 196, 255, 0.3);
  background: rgba(32, 139, 255, 0.1);
}

.feature-group li i,
.signal-grid b { background: #38bdf8; color: #38bdf8; }
.signal-grid > i { background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent); }

.vm-visual::before {
  background: radial-gradient(circle, rgba(15, 118, 255, 0.38) 0, rgba(4, 31, 81, 0.28) 34%, transparent 68%);
}
.vm-grid {
  background-image:
    linear-gradient(rgba(54, 181, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 181, 255, 0.14) 1px, transparent 1px);
}
.orbit { border-color: rgba(57, 193, 255, 0.34); }
.orbit i { background: #56d8ff; box-shadow: 0 0 18px #20bfff; }
.core {
  border-color: rgba(100, 214, 255, 0.54);
  background: linear-gradient(145deg, rgba(12, 93, 184, 0.82), rgba(2, 12, 31, 0.94));
  box-shadow: 0 0 64px rgba(29, 142, 255, 0.25), inset 0 0 30px rgba(74, 204, 255, 0.1);
}
.core svg { color: #72ddff; }
.core small { color: #7eaeca; }

.badge-row span {
  background: rgba(8, 30, 61, 0.42);
  border-color: rgba(137, 205, 255, 0.17);
  color: #91a9c1;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.badge-row .free { color: #75e8ff; border-color: rgba(65, 209, 255, 0.3); background: rgba(20, 146, 211, 0.1); }

.discord-obfuscate::before { background: #0e8fff; opacity: 0.16; }
.discord-orbit::before { background: radial-gradient(circle, rgba(31, 144, 255, 0.3), rgba(4, 31, 78, 0.34) 50%, transparent 72%); }
.discord-orbit-ring { border-color: rgba(72, 196, 255, 0.34); }
.discord-orbit-ring::after { background: #5addff; box-shadow: 0 0 16px #35c9ff; }
.discord-bot-icon {
  color: #8ce7ff;
  border-color: rgba(112, 217, 255, 0.55);
  background: linear-gradient(145deg, rgba(15, 107, 209, 0.92), rgba(3, 18, 47, 0.96));
  box-shadow: 0 0 60px rgba(31, 148, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.17);
}
.status-line { color: #70dcff; }
.discord-invite-note { color: #7790aa; }

.footer { border-color: rgba(131, 193, 255, 0.12); color: #526985; }

@keyframes praetorBrandFlow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes blueTextFlow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes blueButtonFlow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (max-width: 740px) {
  body::before, body::after { min-width: 260px; filter: blur(72px); }
  .site-header { -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
}

@media (prefers-reduced-motion: reduce) {
  .brand > span:last-child,
  .hero-copy h1 span,
  .page-hero h1 span,
  .primary-button,
  .obfuscate-button { animation: none; }
}