.navigation.bar { background-color: #0d1b3e; }

:root {
  --color-primary: #0d1b3e;
  --color-secondary: #00c8e0;
  --color-accent: #ff8c42;
  --color-text: #e8f0fe;
  --color-background: #080d1a;
  --color-surface: #111c3a;
  --color-surface-alt: #162040;
  --color-border: rgba(0, 200, 224, 0.2);
  --font-main: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --glow-cyan: 0 0 18px rgba(0, 200, 224, 0.6), 0 0 40px rgba(0, 200, 224, 0.2);
  --glow-orange: 0 0 18px rgba(255, 140, 66, 0.6), 0 0 40px rgba(255, 140, 66, 0.2);
  --transition: 0.3s ease;
}

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

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-main);
  line-height: 1.6;
  font-size: 16px;
}

a { color: var(--color-secondary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }

.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-secondary), #0099b8);
  color: #080d1a;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}
.btn-primary:hover { box-shadow: var(--glow-cyan); transform: translateY(-2px); color: #080d1a; }

.btn-accent {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-accent), #e07030);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}
.btn-accent:hover { box-shadow: var(--glow-orange); transform: translateY(-2px); }

.section { padding: 4rem 1.5rem; }
.section-center { max-width: 1100px; margin: 0 auto; }

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}
.section-subtitle {
  font-size: 1.1rem;
  color: rgba(232,240,254,0.75);
  margin-bottom: 2.5rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--glow-cyan); transform: translateY(-4px); }

.fade-in { opacity: 0; transition: opacity 0.7s ease; }
.fade-in.visible { opacity: 1; }
.slide-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.slide-up.visible { opacity: 1; transform: translateY(0); }

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0,200,224,0.5)); }
  50% { filter: drop-shadow(0 0 22px rgba(0,200,224,0.9)); }
}

.footer {
  background: var(--color-primary);
  border-top: 1px solid var(--color-border);
  color: rgba(232,240,254,0.6);
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.9rem;
}
.footer a { color: var(--color-secondary); }
.footer a:hover { color: var(--color-accent); }

@media (max-width: 768px) {
  .section-title { font-size: 1.5rem; }
  .section { padding: 2.5rem 1rem; }
}