:root {
  --color-brand-obsidian: #05020a;
  --color-brand-velvet: #0c071a;
  --color-brand-purple: #6d28d9;
  --color-brand-violet: #a855f7;
  --color-brand-electric: #d8b4fe;
  --color-brand-accent: #c084fc;

  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Syne', 'Outfit', system-ui, -apple-system, sans-serif;
}

html, body {
  background-color: #05020a;
  color: #f1f5f9;
  font-family: var(--font-sans);
  overflow-x: hidden;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

/* Fixed grain/noise overlay (output globally by functions.php). */
.noise-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.025;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Radial ambient glows. */
.glow-purple { background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, rgba(109,40,217,0.05) 50%, rgba(0,0,0,0) 100%); }
.glow-electric { background: radial-gradient(circle, rgba(216,180,254,0.1) 0%, rgba(168,85,247,0.03) 60%, rgba(0,0,0,0) 100%); }

/* Custom scrollbar. */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #05020a; }
::-webkit-scrollbar-thumb { background: #1f143d; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #3b2375; }

/* Glassmorphism. */
.glass-panel {
  background: rgba(12,7,26,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(168,85,247,0.1);
}
.glass-panel-hover:hover {
  background: rgba(20,12,43,0.6);
  border-color: rgba(168,85,247,0.25);
  box-shadow: 0 0 25px rgba(168,85,247,0.1);
}

/* Display font helper for Elementor headings. */
.font-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.mono-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-brand-electric); letter-spacing: 0.25em; text-transform: uppercase; font-size: 10px; }

/* ---- Electric border (adapted from source index.css) ---- */
:root {
  --electric-border-color: #a855f7;
  --electric-light-color: #d8b4fe;
  --gradient-color: rgba(109,40,217,0.15);
  --color-neutral-900: #0c071a;
}
.electric-card-container {
  padding: 2px; border-radius: 24px; position: relative;
  background:
    linear-gradient(-30deg, var(--gradient-color), transparent, var(--gradient-color)),
    linear-gradient(to bottom, var(--color-neutral-900), var(--color-neutral-900));
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.electric-card-container:hover { box-shadow: 0 0 35px rgba(168,85,247,0.15); transform: translateY(-2px); }
.electric-border-outer {
  border: 1px solid rgba(168,85,247,0.25); border-radius: 24px;
  padding-right: 4px; padding-bottom: 4px; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.electric-main-card {
  position: absolute; width: calc(100% + 8px); height: calc(100% + 8px); top: -4px; left: -4px;
  border-radius: 24px; border: 2px solid var(--electric-border-color); pointer-events: none;
  filter: url(#turbulent-displace); opacity: 0.75; transition: opacity 0.3s ease; z-index: 0;
}
.electric-card-container:hover .electric-main-card { opacity: 1; }
.electric-glow-layer-1 { border: 2px solid rgba(168,85,247,0.35); border-radius: 24px; position: absolute; inset: 0; filter: blur(1.5px); pointer-events: none; opacity: 0.5; transition: opacity 0.3s ease; z-index: 0; }
.electric-glow-layer-2 { border: 2px solid var(--electric-light-color); border-radius: 24px; position: absolute; inset: 0; filter: blur(5px); pointer-events: none; opacity: 0.3; transition: opacity 0.3s ease; z-index: 0; }
.electric-card-container:hover .electric-glow-layer-1 { opacity: 0.8; }
.electric-card-container:hover .electric-glow-layer-2 { opacity: 0.6; }
.electric-overlay-1, .electric-overlay-2 { position: absolute; inset: 0; border-radius: 24px; mix-blend-mode: overlay; transform: scale(1.05); filter: blur(12px); background: linear-gradient(-30deg, white, transparent 30%, transparent 70%, white); pointer-events: none; z-index: 0; }
.electric-overlay-1 { opacity: 0.25; }
.electric-overlay-2 { opacity: 0.12; }
.electric-background-glow { position: absolute; inset: 0; border-radius: 24px; filter: blur(28px); transform: scale(1.05); opacity: 0.15; z-index: -1; background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color)); pointer-events: none; transition: opacity 0.3s ease; }
.electric-card-container:hover .electric-background-glow { opacity: 0.3; }
/* Inner content must sit above the border layers. */
.electric-content { position: relative; z-index: 10; border-radius: 24px; background: var(--color-neutral-900); }