:root {
  --bg: #050508;
  --panel: rgba(15, 15, 25, 0.7);
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --border: rgba(255, 255, 255, 0.1);
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.02) 1px, transparent 0);
  background-size: 40px 40px;
  color: #e5e7eb;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Glassmorphism Structural Containers */
/* Ensure your base glass class has these two properties */
.glass {
  position: relative;
  overflow: hidden;
  /* ... your other glass styles ... */
}

/* The Mouse-Tracking Ambient Glow */
.glass::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.glass:hover::before {
  opacity: 1;
}

.glass:hover {
  border-color: var(--violet);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
  transform: translateY(-4px);
}

/* Background Grid Overlay styling */
.tech-grid {
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
}

.neon-text {
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* Core Platform Utilities & Interactive Navigation Tabs */
.tab-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.tab-active {
  background: rgba(139, 92, 246, 0.2);
  border-color: var(--violet) !important;
  color: white;
}

.price-tag {
  font-family: 'Monaco', 'Consolas', monospace;
}

.os-status-bar {
  background: rgba(5, 5, 8, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.os-pill-btn {
  background: linear-gradient(90deg, var(--violet), #7c3aed);
  color: white;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.os-pill-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
  filter: brightness(1.1);
}

.os-footer-cta {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 40px;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.os-footer-cta:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--cyan);
}

/* Custom Scrollbar Silencer Utility */
.no-scrollbar::-webkit-scrollbar { 
  display: none; 
}

/* Custom CSS styling rules for live typing interaction output lines */
.terminal-user-command {
  color: #ffffff;
  font-weight: bold;
}
.terminal-sys-response {
  color: #a78bfa;
  white-space: pre-wrap;
  padding-left: 8px;
}
.terminal-err-text {
  color: #f87171;
  padding-left: 8px;
}

/* --- SCROLL REVEAL ANIMATIONS --- */
.reveal-node {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-node.active {
  opacity: 1;
  transform: translateY(0);
}

/* --- BULLETPROOF TAB REVEAL ANIMATION --- */
@keyframes tabSlideIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-animate {
  animation: tabSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}