:root {
  --og-navy: #000a1f;
  --og-blue: #00f0ff;
  --og-yellow: #ffc800;
  --og-card-bg: rgba(255, 255, 255, 0.03);
  --og-card-border: rgba(255, 255, 255, 0.08);
}

.og-glass-card {
  background: var(--og-card-bg);
  border: 1px solid var(--og-card-border);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.og-glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.05);
}

.og-growth-signal {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(to bottom, var(--og-blue), var(--og-yellow));
  z-index: 9999;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 0 15px var(--og-blue);
  mix-blend-mode: screen;
}

.og-reveal {
  opacity: 0;
  transform: translateY(30px);
}

.og-particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.og-particle {
  position: absolute;
  background: var(--og-blue);
  border-radius: 50%;
  opacity: 0.3;
}

/* Floating Animation */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.og-float { animation: float 6s ease-in-out infinite; }
.og-float-delay-1 { animation-delay: -2s; }
.og-float-delay-2 { animation-delay: -4s; }

@media (max-width: 768px) {
  .og-glass-card:hover { transform: none; }
}