/* =========================================================
   BRAND TOKENS — remap Bootstrap's CSS variables to reskin
   the stock components (btn, nav-pills, progress, subtle bg…)
   without overriding their rules directly.
   ========================================================= */
:root {
  --primary: #2f6fed;
  --primary-dark: #1d4fc0;
  --accent: #ffb648;

  --bs-primary: var(--primary);
  --bs-primary-rgb: 47, 111, 237;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-dark);
  --bs-body-font-family: "Inter", "Segoe UI", sans-serif;
  --bs-border-radius: .65rem;
  --bs-border-radius-lg: .85rem;
  --bs-border-radius-xl: 1.1rem;
}

h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: "Poppins", "Segoe UI", sans-serif; }
.font-mono { font-family: "JetBrains Mono", "Courier New", monospace; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


.text-primary { color: var(--primary) !important; }
.bg-primary-subtle { background-color: rgba(47, 111, 237, .12) !important; }
.btn-primary:hover, .btn-primary:focus { --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-active-bg: var(--primary-dark); }

/* =========================================================
   SECTION RHYTHM — one helper instead of a py-* on every section
   ========================================================= */
.section-pad { padding-block: 5.5rem; }
@media (max-width: 767.98px) { .section-pad { padding-block: 4rem; } }

/* Fixed-size circle badges (check icons, avatars, social links, back-to-top) */
.circle-sm { width: 1.75rem; height: 1.75rem; }
.circle-md { width: 2.75rem; height: 2.75rem; }
.circle-lg { width: 2.875rem; height: 2.875rem; }

/* =========================================================
   HERO — rotating role text + portrait frame (no Bootstrap equivalent)
   ========================================================= */
.role-rotator { position: relative; display: block; height: 1.6em; }
.role-word { position: absolute; left: 0; top: 0; opacity: 0; animation: roleFade 8s infinite; }
.role-1 { animation-delay: 0s; }
.role-2 { animation-delay: 2s; }
.role-3 { animation-delay: 4s; }
@keyframes roleFade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  27% { opacity: 0; }
  100% { opacity: 0; }
}

.hero-blob {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 60% 30%, rgba(47, 111, 237, .16), transparent 65%);
  z-index: 0;
}
.hero-portrait-frame { position: relative; width: 100%; max-width: 320px; aspect-ratio: 320 / 380; z-index: 1; }
.hero-portrait-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-portrait-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 991.98px) {
  .hero-copy { order: 2; }
  .hero-media { order: 1; }
}

/* =========================================================
   TESTIMONIALS — horizontal snap scroller (no Bootstrap equivalent)
   ========================================================= */
.testimonial-track { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.testimonial-track > * { scroll-snap-align: start; flex: 0 0 min(360px, 85vw); }

/* =========================================================
   MISC
   ========================================================= */
.social-btn:hover { background-color: var(--primary) !important; color: #fff !important; }
.back-to-top { z-index: 1030; }