/* Brand tweaks layered on top of Bootstrap 5 — keep this file small. */

:root {
  --bs-primary: #1456d6;
  --bs-primary-rgb: 20, 86, 214;
}

body {
  background-color: #f7f9fc;
}

.btn-primary {
  --bs-btn-bg: #1456d6;
  --bs-btn-border-color: #1456d6;
  --bs-btn-hover-bg: #0f45ae;
  --bs-btn-hover-border-color: #0f45ae;
}

.text-primary {
  color: #1456d6 !important;
}

.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(120deg, rgba(9, 20, 51, 0.92) 0%, rgba(15, 45, 110, 0.88) 45%, rgba(20, 86, 214, 0.75) 100%),
    url('/assets/img/hero-team.jpg');
  background-size: cover;
  background-position: center 30%;
}

.hero .lead {
  color: rgba(255, 255, 255, 0.88);
}

.hero-search {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 0.75rem;
  padding: 0.5rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.25);
}

.hero-search .form-control {
  border: none;
}

.hero-search .form-control:focus {
  box-shadow: none;
}

.section-photo {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.75rem 2rem rgba(15, 30, 60, 0.15);
}

.section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cta-bg {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.cta-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(120deg, rgba(9, 20, 51, 0.92) 0%, rgba(15, 45, 110, 0.9) 100%),
    url('/assets/img/woman-laptop.jpg');
  background-size: cover;
  background-position: center 25%;
}

/* Scroll-reveal: elements fade/slide in as they enter the viewport (see main.js) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.job-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  border: 1px solid #e6e9ef;
}

.job-card:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(20, 86, 214, 0.12);
  transform: translateY(-2px);
}

.step-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(20, 86, 214, 0.1);
  color: #1456d6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e6e9ef;
  color: #8a94a6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
}