html {
  scroll-behavior: smooth;
  /* Avoid layout shift when modals set overflow:hidden (scrollbar disappears). */
  scrollbar-gutter: stable;
}

/* Site-themed scrollbars (blue/teal on light track) */
.docs-modal-scroll,
.partners-docs-scroll,
.country-popup-scroll {
  scrollbar-width: thin;
  scrollbar-color: #155dfc #eff6ff;
}

.docs-modal-scroll::-webkit-scrollbar,
.partners-docs-scroll::-webkit-scrollbar,
.country-popup-scroll::-webkit-scrollbar {
  width: 10px;
}

.docs-modal-scroll::-webkit-scrollbar-track,
.partners-docs-scroll::-webkit-scrollbar-track,
.country-popup-scroll::-webkit-scrollbar-track {
  background: #eff6ff;
  border-radius: 999px;
}

.docs-modal-scroll::-webkit-scrollbar-thumb,
.partners-docs-scroll::-webkit-scrollbar-thumb,
.country-popup-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #155dfc 0%, #0092b8 100%);
  border-radius: 999px;
  border: 2px solid #eff6ff;
}

.docs-modal-scroll::-webkit-scrollbar-thumb:hover,
.partners-docs-scroll::-webkit-scrollbar-thumb:hover,
.country-popup-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1249e0 0%, #007fa3 100%);
}

.docs-modal-scroll::-webkit-scrollbar-corner,
.partners-docs-scroll::-webkit-scrollbar-corner,
.country-popup-scroll::-webkit-scrollbar-corner {
  background: #eff6ff;
}

/* Dark modal panels (site-themed popups) */
.docs-modal-scroll--on-dark,
.partners-docs-scroll--on-dark,
.country-popup-scroll--on-dark {
  scrollbar-color: #60a5fa #1e293b;
}

.docs-modal-scroll--on-dark::-webkit-scrollbar-track,
.partners-docs-scroll--on-dark::-webkit-scrollbar-track,
.country-popup-scroll--on-dark::-webkit-scrollbar-track {
  background: #1e293b;
}

.docs-modal-scroll--on-dark::-webkit-scrollbar-thumb,
.partners-docs-scroll--on-dark::-webkit-scrollbar-thumb,
.country-popup-scroll--on-dark::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #60a5fa 0%, #22d3ee 100%);
  border-color: #1e293b;
}

.docs-modal-scroll--on-dark::-webkit-scrollbar-thumb:hover,
.partners-docs-scroll--on-dark::-webkit-scrollbar-thumb:hover,
.country-popup-scroll--on-dark::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #06b6d4 100%);
}

.docs-modal-scroll--on-dark::-webkit-scrollbar-corner,
.partners-docs-scroll--on-dark::-webkit-scrollbar-corner,
.country-popup-scroll--on-dark::-webkit-scrollbar-corner {
  background: #1e293b;
}

#site-header {
  transition:
    background-color 0.2s ease,
    backdrop-filter 0.2s ease,
    -webkit-backdrop-filter 0.2s ease;
}

#site-header.is-scrolled {
  background-color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#site-header[data-header-fixed-bg].is-scrolled {
  background-color: inherit !important;
  -webkit-backdrop-filter: inherit !important;
  backdrop-filter: inherit !important;
}

.faq-row > summary {
  list-style: none;
}

.faq-row > summary::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-row[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  border-top: 4px solid #000;
}

.contact-page details.faq-row > .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  border-top: none;
  transition: grid-template-rows 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.contact-page details.faq-row[open] > .faq-answer {
  grid-template-rows: 1fr;
}

.contact-page details.faq-row > .faq-answer > .faq-answer-inner {
  min-height: 0;
}

.contact-page .faq-chevron {
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.faq-answer p + p,
.faq-answer ul + p {
  margin-top: 1rem;
}

.contact-page .faq-answer-inner p + p,
.contact-page .faq-answer-inner ul + p {
  margin-top: 0.625rem;
}

@media (prefers-reduced-motion: reduce) {
  .contact-page details.faq-row > .faq-answer {
    transition: none;
  }

  .contact-page .faq-chevron {
    transition: none;
  }
}

/* ── Motion tokens ── */
:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-duration: 0.8s;
  --hover-lift: -5px;
}

/* ── Scroll entrance ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--motion-duration) var(--motion-ease-out),
    transform var(--motion-duration) var(--motion-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

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

.reveal-scale {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition:
    opacity var(--motion-duration) var(--motion-ease-out),
    transform var(--motion-duration) var(--motion-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

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

/* Hero loads immediately on page open */
.hero-reveal {
  opacity: 0;
  transform: translateY(32px);
  animation: heroFadeUp 1.1s var(--motion-ease-out) forwards;
  animation-delay: var(--hero-delay, 0ms);
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Interactive cards ── */
.site-hover-card {
  transition:
    transform 0.35s var(--motion-ease-out),
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.site-hover-card:hover {
  transform: translateY(var(--hover-lift));
  border-color: rgba(255, 255, 255, 0.28) !important;
  background-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(21, 93, 252, 0.12);
}

.site-hover-card:active {
  transform: translateY(-2px);
}

.site-hover-card:hover .site-icon-badge {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}

.site-icon-badge {
  transition:
    transform 0.35s var(--motion-ease-spring),
    box-shadow 0.35s ease;
}

/* Gradient primary buttons */
.btn-glow {
  transition:
    transform 0.28s var(--motion-ease-out),
    box-shadow 0.28s ease,
    filter 0.28s ease !important;
}

.btn-glow:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 14px 28px rgba(21, 93, 252, 0.38),
    0 6px 12px rgba(0, 0, 0, 0.2) !important;
  filter: brightness(1.08);
}

.btn-glow:active {
  transform: translateY(0) !important;
  filter: brightness(1);
}

/* Ghost / outline buttons */
.btn-ghost-hover {
  transition:
    transform 0.28s var(--motion-ease-out),
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background-color 0.28s ease !important;
}

.btn-ghost-hover:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(21, 93, 252, 0.55) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Nav link underline */
.nav-link-hover {
  position: relative;
}

.nav-link-hover:hover::after {
  transform: scaleX(1);
}

#site-header a[href="/"]:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 12px rgba(21, 93, 252, 0.35));
}

#site-header a[href="/"] img {
  transition:
    transform 0.35s var(--motion-ease-spring),
    filter 0.35s ease;
}

footer a {
  transition:
    color 0.25s ease,
    transform 0.25s var(--motion-ease-out) !important;
}

footer a:hover {
  transform: translateX(3px);
}

/* Partner tile label on hover */
[id$="-explore"]:hover span {
  color: #1e3a8a;
  transition: color 0.25s ease;
}

[id$="-explore"]:hover img {
  transform: scale(1.12);
}

[id$="-explore"] img {
  transition: transform 0.35s var(--motion-ease-spring);
}

/* Modal entrance */
#docs-partner-modal.modal-is-open > [data-close-modal],
#country-popup.modal-is-open > [data-country-popup-dismiss] {
  animation: modalBackdropIn 0.45s ease forwards;
}

#docs-partner-modal.modal-is-open .pointer-events-auto > div,
#country-popup.modal-is-open .pointer-events-auto > div {
  animation: modalPanelIn 0.65s var(--motion-ease-out) forwards;
}

@keyframes modalBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalPanelIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Popup list items stagger in when rendered */
.country-option,
.country-service-option,
.partner-docs-row {
  animation: listItemIn 0.55s var(--motion-ease-out) backwards;
  animation-delay: calc(var(--item-index, 0) * 55ms);
}

@keyframes listItemIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  .hero-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .site-hover-card,
  .site-hover-card:hover,
  .btn-glow,
  .btn-glow:hover,
  .btn-ghost-hover,
  .btn-ghost-hover:hover,
  #site-header a[href="/"]:hover img,
  footer a:hover,
  [id$="-explore"]:hover img {
    transform: none;
    animation: none;
    filter: none;
    box-shadow: none;
  }

  .nav-link-hover::after {
    display: none;
  }

  #docs-partner-modal.modal-is-open .pointer-events-auto > div,
  #country-popup.modal-is-open .pointer-events-auto > div,
  .country-option,
  .country-service-option,
  .partner-docs-row {
    animation: none;
  }
}