/* ====================================================================
   MAGNOLIA BROKER - FinTech & AI Advisory
   Modern Styles & Design System
   ==================================================================== */

:root {
  --color-primary: #10b981;        /* Emerald Green */
  --color-primary-light: #34d399;  /* Light Emerald */
  --color-primary-dark: #059669;   /* Deep Green */
  --color-accent-lime: #84cc16;    /* Lime accent matching logo */
  --color-bg-dark: #080c14;        /* Deep Space Black */
  --color-bg-card: rgba(15, 23, 42, 0.75);
  --color-border-card: rgba(255, 255, 255, 0.08);
  --color-text-main: #f8fafc;
  --color-text-muted: #94a3b8;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #080c14;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #10b981;
}

/* Background Gradients & Glows */
.bg-radial-mesh {
  background-image: 
    radial-gradient(circle at 20% 15%, rgba(16, 185, 129, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(132, 204, 22, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #080c14 0%, #0d1527 50%, #080c14 100%);
}

.grid-bg-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(13, 20, 36, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(16, 185, 129, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(16, 185, 129, 0.15);
}

.glass-card-static {
  background: rgba(13, 20, 36, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.glass-nav {
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Glow effects */
.glow-emerald {
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
}

.glow-text-emerald {
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

/* Financial Ticker animation */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 35s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

/* Live Pulse Indicator */
.pulse-dot {
  position: relative;
}
.pulse-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.9; }
  70% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
  100% { opacity: 0; }
}

/* Modern Gradient Text */
.gradient-text-emerald {
  background: linear-gradient(135deg, #a3e635 0%, #10b981 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-silver {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Terminal & Code styling */
.terminal-window {
  background: #090e17;
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(16, 185, 129, 0.08);
  border-radius: 12px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.terminal-header {
  background: #0d1524;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Floating WhatsApp button pulse */
.floating-whatsapp {
  animation: float-wa 3s ease-in-out infinite;
}

@keyframes float-wa {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Smooth Focus states */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}