* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Crimson Pro', Georgia, serif;
  background: #F0F4F8;
  transition: background 0.4s, color 0.4s;
}

body.dark-mode {
  background: #0d1b2a;
  color: #e0e0e0;
}

@keyframes pulse-drop {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

@keyframes waterCycle {
  0% { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

.pulse-drop {
  animation: pulse-drop 2s ease-in-out infinite;
  display: inline-block;
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.shimmer-bg {
  background: linear-gradient(90deg, #e0e7ee 25%, #f0f4f8 50%, #e0e7ee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark-mode .shimmer-bg {
  background: linear-gradient(90deg, #1a2a3a 25%, #243447 50%, #1a2a3a 75%);
  background-size: 200% 100%;
}

.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(30, 150, 252, 0.3);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

.chart-bar {
  transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-fill {
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tab-underline {
  transition: left 0.3s ease, width 0.3s ease;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f0f4f8;
}

::-webkit-scrollbar-thumb {
  background: #1E96FC;
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: #0d1b2a;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: #3CAEA3;
}

.wave-footer {
  position: relative;
}

.wave-footer::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  width: 200%;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0 20 Q150 0 300 20 T600 20 T900 20 T1200 20 V40 H0Z' fill='%230A2463'/%3E%3C/svg%3E") repeat-x;
  animation: waveMove 8s linear infinite;
}

.strategy-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.strategy-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(10, 36, 99, 0.12);
}

.dark-mode .strategy-card:hover {
  box-shadow: 0 8px 32px rgba(30, 150, 252, 0.15);
}

.floating {
  animation: float 3s ease-in-out infinite;
}

.keyword-pill {
  transition: transform 0.15s, background 0.15s;
}

.keyword-pill:hover {
  transform: scale(1.05);
}