:root {
  --navy: #0a1c32;
  --steel: #13375a;
  --sky: #2f87db;
  --ink: #17212b;
  --muted: #5f6f80;
  --surface: #ffffff;
}

* { box-sizing: border-box; }

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 15% 20%, #e5f2ff 0%, #f7fbff 35%, #f4f8fc 100%);
  overflow-x: hidden;
}

.bg-shape {
  position: fixed;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.25;
  z-index: -1;
  animation: float 8s ease-in-out infinite;
}
.bg-shape-one { width: 320px; height: 320px; background: #6db5ff; top: -80px; right: -60px; }
.bg-shape-two { width: 260px; height: 260px; background: #9ad9c8; bottom: 10%; left: -80px; animation-delay: 1.2s; }

.navbar {
  backdrop-filter: blur(12px);
  background: linear-gradient(120deg, rgba(10,28,50,.94), rgba(19,55,90,.92));
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.navbar .nav-link { color: rgba(255,255,255,.88); }
.navbar .nav-link:hover { color: #fff; transform: translateY(-1px); transition: .25s ease; }

.hero {
  color: #fff;
  background: linear-gradient(140deg, #0e2b4a, #1b5586 55%, #2f87db);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 24px 40px rgba(11, 36, 63, 0.25);
}

.info-card {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(16, 43, 71, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.info-card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(16, 43, 71, 0.16); }

.card {
  border: 1px solid #e5edf5;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(21, 50, 80, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(21, 50, 80, 0.14); }

.btn-primary {
  background: linear-gradient(120deg, #2076c3, #2f87db);
  border: 0;
  box-shadow: 0 10px 20px rgba(29, 108, 181, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); }

footer { background: rgba(255,255,255,.92) !important; }

.reveal-up { animation: revealUp .7s ease both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }

@keyframes revealUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(14px); }
}