:root {
  --fx-page-bg: #f9fafb;
  --fx-surface: #ffffff;
  --fx-surface-soft: #f3f6fb;
  --fx-border: #dbe3ec;
  --fx-border-strong: #c7d3e0;
  --fx-text: #0f172a;
  --fx-muted: #64748b;
  --fx-heading: #0a0f1e;
  --fx-brand: #3b82f6;
  --fx-brand-soft: rgba(59, 130, 246, 0.14);
}

/* Remove noisy/dotted animated layers that hurt readability */
[data-alpha-mask],
[data-us-project],
div[style*="noiseFilter"],
div[style*="fractalNoise"],
iframe[src*="unicornstudio"],
canvas[style*="position: absolute"] {
  display: none !important;
}

html,
body {
  background: var(--fx-page-bg) !important;
  color: var(--fx-text) !important;
  font-family: Inter, "Geist Sans", system-ui, -apple-system, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 380px at 100% -12%, rgba(59, 130, 246, 0.11), transparent 64%),
    radial-gradient(760px 340px at 0% 0%, rgba(148, 163, 184, 0.16), transparent 66%);
}

[class*="bg-[#050505]"],
[class*="bg-[#0a0a0a]"],
[class*="bg-black"] {
  background: transparent !important;
}

nav[role="navigation"] {
  background: rgba(249, 250, 251, 0.88) !important;
  border-bottom: 1px solid var(--fx-border) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
}

.mobile-menu {
  background: rgba(249, 250, 251, 0.98) !important;
  border-color: var(--fx-border) !important;
}

.mobile-menu-btn {
  border-color: var(--fx-border-strong) !important;
  background: #fff !important;
}

.mobile-menu-btn span {
  background: #334155 !important;
}

h1,
h2,
h3,
h4,
.font-display,
[class*="hero-title"] {
  color: var(--fx-heading) !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

section:first-of-type h1,
section:first-of-type .hero-title {
  text-align: center !important;
  max-width: 20ch !important;
  margin-inline: auto !important;
  font-size: clamp(2.5rem, 5.3vw, 4.2rem) !important;
}

[class*="text-white"],
[class*="text-gray-200"],
[class*="text-gray-300"] {
  color: var(--fx-text) !important;
}

[class*="text-gray-400"],
[class*="text-gray-500"],
[class*="text-gray-600"] {
  color: var(--fx-muted) !important;
}

[class*="text-accent"] {
  color: var(--fx-brand) !important;
}

[class*="border-white"] {
  border-color: var(--fx-border) !important;
}

[class*="border-accent"] {
  border-color: rgba(59, 130, 246, 0.45) !important;
}

section {
  padding-top: clamp(5rem, 8vw, 6rem) !important;
  padding-bottom: clamp(5rem, 8vw, 6rem) !important;
}

.glass-panel,
.spotlight-card,
.addon-card,
article.rounded-2xl,
article.rounded-xl {
  background: var(--fx-surface) !important;
  border: 1px solid var(--fx-border) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

.glass-panel:hover,
.spotlight-card:hover,
.addon-card:hover {
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.12) !important;
  transition: box-shadow 0.4s ease !important;
}

.spotlight-card::before,
.addon-card::before {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%) !important;
}

.btn-magnetic,
.bg-accent,
button[class*="bg-accent"],
a[class*="bg-accent"] {
  background: var(--fx-brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.btn-magnetic:hover,
.bg-accent:hover,
button[class*="bg-accent"]:hover,
a[class*="bg-accent"]:hover {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.35),
    0 14px 28px rgba(59, 130, 246, 0.26) !important;
}

button,
a[role="button"] {
  border-radius: 8px !important;
}

[class*="bg-accent/"] {
  background: var(--fx-brand-soft) !important;
  color: #2154a4 !important;
}