:root{
  --bg0:#f8fbff;
  --bg1:#f2f7ff;
  --ink:#0f172a;
  --muted:#475569;
  --primary:#0056b3;
  --secondary:#00a0e9;
  --ring:rgba(0,86,179,.24);
  --shadow:0 18px 40px rgba(2,6,23,.10);
  --shadow-sm:0 10px 24px rgba(2,6,23,.08);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(0,160,233,.12), transparent 60%),
    radial-gradient(1000px 700px at 85% 0%, rgba(0,86,179,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.site-header{backdrop-filter:saturate(160%) blur(14px)}

.nav-link{
  position:relative;
  color:var(--muted);
  font-weight:600;
  font-size: 1.05rem;
  letter-spacing:.2px;
  transition:color .18s ease;
}

/* Force larger font on header nav links if they don't have .nav-link class yet but are inside nav */
header nav a {
  font-size: 1.125rem; /* text-lg equivalent */
}
.nav-link:hover{color:var(--ink)}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
  border-radius:999px;
}
.nav-link[aria-current="page"]{color:var(--ink)}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.625rem 1rem;
  font-weight:600;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff;
  box-shadow:0 14px 26px rgba(0,86,179,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(0,86,179,.22);
  filter:saturate(110%);
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.625rem 1rem;
  font-weight:600;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  border:1px solid rgba(148,163,184,.55);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn-ghost:hover{
  transform:translateY(-1px);
  background:#fff;
  border-color:rgba(148,163,184,.85);
}

.card{
  border-radius:1rem;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(226,232,240,.8);
  box-shadow:var(--shadow-sm);
}
.card-hover{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card-hover:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:rgba(186,230,253,.95);
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(2,132,199,.2);
  background:rgba(224,242,254,.65);
  color:#0369a1;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.mobile-overlay{
  background:rgba(2,6,23,.52);
  backdrop-filter:blur(2px);
}

/* Animation Utilities */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
  animation: blob 7s infinite;
}
.animation-delay-2000 {
  animation-delay: 2s;
}
.animation-delay-4000 {
  animation-delay: 4s;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0; /* Initially hidden */
}
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }