/* ==========================================================================
   Business Website - custom.css
   --------------------------------------------------------------------------
   Hand-written stylesheet. Loaded LAST so it can override both Bootstrap and
   the compiled Tailwind output:

       bootstrap.min.css  ->  tailwind.css  ->  custom.css

   Why a separate file?  Because this is where everything Tailwind's component
   layer cannot express lives, and none of it is ever tree-shaken:

     1. Design tokens (CSS custom properties = the single re-branding surface)
     2. Self-hosted Inter font faces
     3. Base defaults
     4. JS state classes (header, scroll progress, reveal engine, forms)
     5. Bootstrap component skins (dropdown, offcanvas, accordion, carousel)
     6. Decorative layers: glass, gradient meshes, orbs, shapes, sheen,
        marquee, tilt, gradient borders, image curtains
     7. Article / legal typography
     8. Accessibility and performance safeguards (prefers-reduced-motion)
     9. Print styles

   ANIMATION POLICY
     * Only `transform`, `opacity` and `filter` are animated - never layout
       properties - so everything stays on the compositor.
     * Every animation is wrapped in `prefers-reduced-motion: no-preference`
       and/or neutralised by the reduce block in section 8.
     * Reveal animations are progressive: without JS (html.no-js) nothing is
       hidden, so the site is fully readable with scripting disabled.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS - change these to re-brand the whole website
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (mirrors tailwind.config.js -> theme.extend.colors) */
  --fc-primary: #2545d8;
  --fc-primary-50: #eef4ff;
  --fc-primary-100: #dbe6ff;
  --fc-primary-200: #bdd0ff;
  --fc-primary-400: #6287fb;
  --fc-primary-600: #2545d8;
  --fc-primary-700: #1b35ad;
  --fc-primary-900: #16265f;
  --fc-primary-950: #0e1940;

  --fc-accent: #12a18e;
  --fc-accent-50: #e8fbf7;
  --fc-accent-300: #58d8c3;
  --fc-accent-600: #0c8173;

  --fc-violet-400: #a393fb;
  --fc-violet-600: #6d5efc;
  --fc-violet-700: #5b46e5;

  --fc-ink-900: #0f1b2d;
  --fc-ink-950: #0a1322;
  --fc-ink-700: #334155;
  --fc-ink-500: #64748b;
  --fc-ink-200: #e2e8f0;
  --fc-ink-100: #f1f5f9;

  --fc-surface: #f7f9fc;
  --fc-surface-alt: #eef3fa;
  --fc-border: #e2e8f0;
  --fc-gold: #c9a24b;

  /* Gradient library - every gradient in the site uses one of these */
  --fc-gradient-brand: linear-gradient(120deg, #2545d8 0%, #5b46e5 46%, #12a18e 118%);
  --fc-gradient-brand-soft: linear-gradient(135deg, rgba(37, 69, 216, 0.10) 0%, rgba(109, 94, 252, 0.08) 50%, rgba(18, 161, 142, 0.10) 100%);
  --fc-gradient-ink: linear-gradient(150deg, #0a1322 0%, #0f1b2d 42%, #16265f 100%);
  --fc-gradient-ink-deep: linear-gradient(160deg, #0a1322 0%, #0f1b2d 45%, #16265f 100%);
  --fc-gradient-hero: linear-gradient(135deg, #0a1322 0%, #131f45 45%, #1b35ad 115%);
  --fc-gradient-card: linear-gradient(165deg, #ffffff 0%, #f7f9fc 60%, #eef3fa 100%);
  --fc-gradient-sheen: linear-gradient(100deg, transparent 12%, rgba(255, 255, 255, 0.45) 48%, transparent 84%);
  --fc-gradient-hairline: linear-gradient(90deg, transparent 0%, rgba(37, 69, 216, 0.45) 50%, transparent 100%);

  /* Glass */
  --fc-glass-bg: rgba(255, 255, 255, 0.72);
  --fc-glass-bg-strong: rgba(255, 255, 255, 0.88);
  --fc-glass-border: rgba(255, 255, 255, 0.6);
  --fc-glass-dark-bg: rgba(255, 255, 255, 0.07);
  --fc-glass-dark-border: rgba(255, 255, 255, 0.14);

  /* Elevation - one scale for the entire site */
  --fc-shadow-soft: 0 1px 2px rgba(10, 19, 34, 0.04), 0 8px 24px -12px rgba(10, 19, 34, 0.12);
  --fc-shadow-card: 0 2px 6px rgba(10, 19, 34, 0.05), 0 18px 40px -18px rgba(10, 19, 34, 0.18);
  --fc-shadow-hover: 0 4px 10px rgba(10, 19, 34, 0.06), 0 30px 60px -26px rgba(37, 69, 216, 0.32);
  --fc-shadow-lift: 0 24px 60px -22px rgba(37, 69, 216, 0.35);
  --fc-shadow-glow: 0 20px 50px -20px rgba(37, 69, 216, 0.55);
  --fc-shadow-glass: 0 10px 40px -20px rgba(10, 19, 34, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* Geometry */
  --fc-radius-card: 18px;
  --fc-radius-panel: 24px;
  --fc-content-max: 1320px;
  --fc-header-height: 76px;

  /* Motion - one easing curve and a five-step duration scale */
  --fc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fc-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --fc-dur-1: 150ms;
  --fc-dur-2: 250ms;
  --fc-dur-3: 400ms;
  --fc-dur-4: 600ms;
  --fc-dur-5: 800ms;

  /* Focus ring */
  --fc-focus-ring: 0 0 0 3px rgba(37, 69, 216, 0.35);
}

/* --------------------------------------------------------------------------
   2. SELF-HOSTED FONT - Inter (latin subset, woff2)
      Files: assets/fonts/inter-latin-<weight>-normal.woff2
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   3. BASE DEFAULTS (Bootstrap Reboot provides the reset; these are brand-level)
   -------------------------------------------------------------------------- */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--fc-ink-700);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3 {
  color: var(--fc-ink-900);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Body copy wraps without leaving single-word lines behind. */
p {
  text-wrap: pretty;
}

a {
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
}

/* Accent underline for inline links inside body copy */
.article-body a,
.link-inline {
  color: var(--fc-primary-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-inline:hover,
.article-body a:hover {
  color: var(--fc-primary-700);
}

/* Skip link (accessibility) - visible only when focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1080;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--fc-radius-card) var(--fc-radius-card);
  background: var(--fc-gradient-brand);
  color: #fff;
  font-weight: 600;
  transition: top 200ms ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* Global visible focus state (accessibility requirement) */
:focus-visible {
  outline: 2px solid var(--fc-primary-600);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. JS STATE CLASSES
      Toggled at runtime by assets/js/main.js. They live outside the Tailwind
      layer so they can never be tree-shaken away.
   -------------------------------------------------------------------------- */

/* --- sticky / glass header ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--fc-glass-bg);
  border-bottom: 1px solid transparent;
  transition: background-color var(--fc-dur-3) ease, box-shadow var(--fc-dur-3) ease,
    border-color var(--fc-dur-3) ease, backdrop-filter var(--fc-dur-3) ease;
}

@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .site-header {
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
  }
}

.site-header.is-stuck {
  background: var(--fc-glass-bg-strong);
  box-shadow: var(--fc-shadow-soft);
  border-bottom-color: var(--fc-border);
}

/* The nav bar compresses slightly once the page is scrolled, which reads as
   the header "settling" after the hero. */
.site-header.is-stuck .navbar-c > .container {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Transparent header variant: used on EVERY page so the dark hero can run
   edge to edge underneath it. It turns into the glass bar above as soon as
   .is-stuck is applied by the scroll handler. */
.site-header--overlay:not(.is-stuck) {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header--overlay:not(.is-stuck) .navbar-brand-c,
.site-header--overlay:not(.is-stuck) .nav-underline,
.site-header--overlay:not(.is-stuck) .header-action {
  color: #ffffff;
}

.site-header--overlay:not(.is-stuck) .nav-underline:hover,
.site-header--overlay:not(.is-stuck) .header-action:hover {
  color: rgba(255, 255, 255, 0.85);
}

.site-header--overlay:not(.is-stuck) .nav-underline::before {
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.site-header--overlay:not(.is-stuck) .nav-underline::after {
  background-image: linear-gradient(90deg, var(--fc-accent-300) 0%, #ffffff 100%);
}

.site-header--overlay:not(.is-stuck) .navbar-toggler-c {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.site-header--overlay:not(.is-stuck) .navbar-toggler-c:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* --- overlay hero --------------------------------------------------------- */
/* Every page uses .site-header--overlay, so the dark hero slides underneath the
   transparent sticky header. --fc-header-height is measured and re-published by
   assets/js/main.js, so the offset always matches the real header height (the
   header also compresses slightly once it is stuck, and JS re-measures then). */
.hero-overlap {
  margin-top: calc(var(--fc-header-height) * -1);
  padding-top: calc(var(--fc-header-height) + 2.25rem);
}

/* --- scroll progress rail (thin gradient line under the header) ---------- */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform: scaleX(var(--fc-progress, 0));
  transform-origin: left center;
  background-image: var(--fc-gradient-brand);
  opacity: 0;
  transition: opacity var(--fc-dur-3) ease;
  pointer-events: none;
}

.site-header.is-scrolled .scroll-progress {
  opacity: 1;
}

/* --- scroll reveal engine ------------------------------------------------- */
/* Each variant only changes the transform that is used before reveal; the
   revealed state is identical, so the whole site settles the same way. */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--fc-dur-4) var(--fc-ease), transform var(--fc-dur-5) var(--fc-ease),
    filter var(--fc-dur-4) var(--fc-ease), clip-path var(--fc-dur-5) var(--fc-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.js [data-reveal='down'] {
  transform: translate3d(0, -28px, 0);
}

html.js [data-reveal='left'] {
  transform: translate3d(-40px, 0, 0);
}

html.js [data-reveal='right'] {
  transform: translate3d(40px, 0, 0);
}

html.js [data-reveal='zoom'] {
  transform: scale(0.94);
}

html.js [data-reveal='blur'] {
  filter: blur(12px);
}

html.js [data-reveal='clip'] {
  clip-path: inset(0 0 100% 0);
}

html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Image curtain: a gradient panel that wipes away as the image reveals.
   Progressive enhancement: without JS the curtain sits retracted, so images are
   always visible; the html.js rules below cover them only until they reveal. */
.img-curtain {
  position: relative;
  overflow: hidden;
}

.img-curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fc-gradient-brand);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--fc-dur-5) var(--fc-ease);
  transition-delay: var(--reveal-delay, 0ms);
  pointer-events: none;
}

html.js [data-reveal] .img-curtain::after {
  transform: scaleX(1);
}

html.js [data-reveal].is-revealed .img-curtain::after,
html.js .img-curtain.is-revealed::after {
  transform: scaleX(0);
}

/* --- project / blog filtering -------------------------------------------- */
.is-hidden {
  display: none !important;
}

.filter-btn.is-active {
  border-color: transparent;
  background-image: var(--fc-gradient-brand);
  color: #ffffff;
  box-shadow: var(--fc-shadow-lift);
}

/* --- back to top ---------------------------------------------------------- */
.float-top {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.float-top.is-out {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

/* --- modal / offcanvas open state ---------------------------------------- */
/* Nothing here: Bootstrap owns behaviour. Only the mobile toggler morphs. */
.navbar-toggler-c i {
  transition: transform var(--fc-dur-2) var(--fc-ease);
}

.navbar-toggler-c.is-open i {
  transform: rotate(90deg) scale(0.92);
}

/* --- counters ------------------------------------------------------------- */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* --- form validation ----------------------------------------------------- */
.form-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #d1293d;
}

.form-control-c.is-invalid-c {
  border-color: #d1293d;
  box-shadow: 0 0 0 3px rgba(209, 41, 61, 0.12);
}

.form-note {
  font-size: 0.8125rem;
  color: var(--fc-ink-500);
}

.form-status {
  display: none;
  border-radius: var(--fc-radius-card);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.form-status.is-visible {
  display: block;
  animation: fc-rise var(--fc-dur-4) var(--fc-ease) both;
}

.form-status.is-success {
  background: #e8fbf7;
  border: 1px solid #93eadb;
  color: #0c665c;
}

.form-status.is-error {
  background: #fdecee;
  border: 1px solid #f5c2c9;
  color: #a11227;
}

/* --------------------------------------------------------------------------
   5. BOOTSTRAP COMPONENT SKINS
      Only component chrome is restyled here - structure and behaviour stay
      Bootstrap so the components keep working with Tailwind utilities inside.
   -------------------------------------------------------------------------- */

/* --- mobile toggler ------------------------------------------------------- */
.navbar-toggler-c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--fc-border);
  border-radius: 12px;
  background: transparent;
  color: var(--fc-ink-900);
  font-size: 1.25rem;
  transition: background-color var(--fc-dur-2) ease, border-color var(--fc-dur-2) ease,
    transform var(--fc-dur-2) var(--fc-ease);
}

.navbar-toggler-c:hover {
  background: var(--fc-surface-alt);
  transform: translateY(-1px);
}

/* --- desktop dropdown skin ------------------------------------------------ */
.navbar-c .dropdown-menu {
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card);
  box-shadow: var(--fc-shadow-card);
  padding: 0.5rem;
  margin-top: 0.75rem;
}

.navbar-c .dropdown-menu.show {
  animation: fc-dropdown-in var(--fc-dur-2) var(--fc-ease) both;
}

.navbar-c .dropdown-item {
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fc-ink-700);
  transition: background-color var(--fc-dur-1) ease, color var(--fc-dur-1) ease,
    padding-left var(--fc-dur-2) var(--fc-ease);
}

.navbar-c .dropdown-item:hover,
.navbar-c .dropdown-item:focus {
  background: var(--fc-primary-50);
  color: var(--fc-primary-700);
  padding-left: 1.1rem;
}

.navbar-c .dropdown-item.active,
.navbar-c .dropdown-item:active {
  background-image: var(--fc-gradient-brand);
  color: #ffffff;
}

.navbar-c .dropdown-toggle::after {
  margin-left: 0.35rem;
  vertical-align: 0.15em;
  transition: transform var(--fc-dur-2) var(--fc-ease);
}

.navbar-c .dropdown-toggle.show::after {
  transform: rotate(180deg);
}

/* --- off-canvas mobile menu ---------------------------------------------- */
.offcanvas-c {
  width: min(420px, 92vw);
  border-left: 1px solid var(--fc-glass-border);
  background: var(--fc-glass-bg-strong);
}

@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .offcanvas-c {
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
  }
}

.offcanvas-c .offcanvas-header {
  border-bottom: 1px solid var(--fc-border);
  background: var(--fc-gradient-brand-soft);
}

.offcanvas-c .offcanvas-body {
  padding-top: 0.5rem;
}

.offcanvas-c .accordion-button {
  padding: 0.9rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--fc-ink-900);
  box-shadow: none;
  background: transparent;
  transition: color var(--fc-dur-2) ease, padding-left var(--fc-dur-2) var(--fc-ease);
}

.offcanvas-c .accordion-button:not(.collapsed) {
  color: var(--fc-primary-700);
  background: transparent;
  padding-left: 0.35rem;
}

.offcanvas-c .accordion-body {
  padding: 0 0 0.75rem 0.5rem;
}

.offcanvas-c .accordion-body a {
  color: var(--fc-ink-600);
  transition: color var(--fc-dur-2) ease, transform var(--fc-dur-2) var(--fc-ease);
}

.offcanvas-c .accordion-body a:hover {
  color: var(--fc-primary-700);
  transform: translateX(4px);
}

.offcanvas-c .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--fc-border);
  border-radius: 0;
}

/* Staggered entrance for the mobile menu: its blocks rise in sequence. */
@media (prefers-reduced-motion: no-preference) {
  .offcanvas.show .offcanvas-body > * {
    animation: fc-rise var(--fc-dur-4) var(--fc-ease) both;
  }

  .offcanvas.show .offcanvas-body > *:nth-child(1) {
    animation-delay: 40ms;
  }

  .offcanvas.show .offcanvas-body > *:nth-child(2) {
    animation-delay: 90ms;
  }

  .offcanvas.show .offcanvas-body > *:nth-child(3) {
    animation-delay: 140ms;
  }

  .offcanvas.show .offcanvas-body > *:nth-child(4) {
    animation-delay: 190ms;
  }

  .offcanvas.show .offcanvas-body > *:nth-child(n + 5) {
    animation-delay: 240ms;
  }
}

/* --- accordion (FAQ groups) ---------------------------------------------- */
.accordion-c .accordion-item {
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card);
  background: #ffffff;
  margin-bottom: 0.9rem;
  overflow: hidden;
  transition: border-color var(--fc-dur-3) ease, box-shadow var(--fc-dur-3) ease;
}

.accordion-c .accordion-item:hover {
  border-color: var(--fc-primary-200);
  box-shadow: var(--fc-shadow-soft);
}

.accordion-c .accordion-button {
  padding: 1.15rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fc-ink-900);
  background: #ffffff;
  box-shadow: none;
}

.accordion-c .accordion-button:not(.collapsed) {
  color: var(--fc-primary-700);
  background: var(--fc-primary-50);
}

.accordion-c .accordion-button::after {
  width: 1.1rem;
  height: 1.1rem;
  background-size: 1.1rem;
  transition: transform var(--fc-dur-3) var(--fc-ease);
}

.accordion-c .accordion-button:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(37, 69, 216, 0.18);
}

.accordion-c .accordion-body {
  padding: 0 1.4rem 1.35rem;
  color: var(--fc-ink-500);
  line-height: 1.75;
}

/* --- carousel (testimonials) ---------------------------------------------- */
.carousel-c .carousel-indicators {
  position: static;
  margin: 2rem 0 0;
}

.carousel-c .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(15, 27, 45, 0.22);
  border: 0;
  opacity: 1;
  margin: 0 5px;
  transition: width var(--fc-dur-3) var(--fc-ease), background-color var(--fc-dur-3) ease;
}

.carousel-c .carousel-indicators .active {
  background-image: var(--fc-gradient-brand);
  width: 30px;
  border-radius: 999px;
}

.carousel-c .carousel-control-prev,
.carousel-c .carousel-control-next {
  width: 3rem;
  height: 3rem;
  top: auto;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid var(--fc-border);
  background: #ffffff;
  color: var(--fc-ink-900);
  opacity: 1;
  transition: background-color var(--fc-dur-2) ease, border-color var(--fc-dur-2) ease,
    transform var(--fc-dur-2) var(--fc-ease), box-shadow var(--fc-dur-2) ease;
}

.carousel-c .carousel-control-prev {
  left: auto;
  right: 3.75rem;
}

.carousel-c .carousel-control-next {
  right: 0;
}

.carousel-c .carousel-control-prev:hover,
.carousel-c .carousel-control-next:hover {
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--fc-shadow-lift);
  background-image: var(--fc-gradient-brand);
}

.carousel-c .carousel-control-prev-icon,
.carousel-c .carousel-control-next-icon {
  width: 1rem;
  height: 1rem;
}

/* --- form controls -------------------------------------------------------- */
.form-control-c {
  display: block;
  width: 100%;
  padding: 0.85rem 1.05rem;
  font-size: 0.9375rem;
  color: var(--fc-ink-900);
  background-color: #ffffff;
  border: 1px solid var(--fc-border);
  border-radius: 14px;
  transition: border-color var(--fc-dur-2) ease, box-shadow var(--fc-dur-2) ease;
}

.form-control-c::placeholder {
  color: #94a3b8;
}

.form-control-c:hover {
  border-color: var(--fc-primary-200);
}

.form-control-c:focus {
  outline: none;
  border-color: var(--fc-primary-400);
  box-shadow: var(--fc-focus-ring);
}

.form-label-c {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fc-ink-900);
}

.form-check-c {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--fc-ink-500);
}

.form-check-c input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

select.form-control-c {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* --- badges --------------------------------------------------------------- */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  background: var(--fc-primary-50);
  color: var(--fc-primary-700);
  padding: 0.35rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-soft-accent {
  background: var(--fc-accent-50);
  color: var(--fc-accent-600);
}

.badge-soft-light {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
   6. DECORATIVE LAYERS
      Glass, gradient meshes, orbs, geometric shapes, sheen, marquee, tilt and
      the image curtain. All pure CSS - no animation library is loaded.
   -------------------------------------------------------------------------- */

/* --- glassmorphism -------------------------------------------------------- */
.surface-glass {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--fc-radius-panel);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--fc-shadow-glass);
}

.surface-glass-dark {
  position: relative;
  border: 1px solid var(--fc-glass-dark-border);
  border-radius: var(--fc-radius-panel);
  background: var(--fc-glass-dark-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  .surface-glass,
  .surface-glass-dark {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

/* Fallback: keep the contrast when backdrop-filter is unavailable. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .surface-glass {
    background: rgba(255, 255, 255, 0.94);
  }

  .surface-glass-dark {
    background: rgba(10, 19, 34, 0.72);
  }
}

/* --- gradient border (1px masked ring, appears on hover) ------------------ */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: linear-gradient(120deg, #2545d8 0%, #6d5efc 46%, #12a18e 118%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--fc-dur-3) var(--fc-ease);
  pointer-events: none;
}

.gradient-border:hover::before,
.gradient-border:focus-within::before {
  opacity: 1;
}

/* --- hero: gradient mesh, grid, orbs, glows ------------------------------ */
.hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(58% 58% at 12% 16%, rgba(37, 69, 216, 0.55) 0%, transparent 62%),
    radial-gradient(48% 52% at 88% 20%, rgba(109, 94, 252, 0.42) 0%, transparent 66%),
    radial-gradient(55% 60% at 62% 108%, rgba(18, 161, 142, 0.42) 0%, transparent 62%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(78% 70% at 50% 22%, #000 18%, transparent 78%);
  mask-image: radial-gradient(78% 70% at 50% 22%, #000 18%, transparent 78%);
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  pointer-events: none;
}

.hero-orb-a {
  width: 34rem;
  height: 34rem;
  top: -14rem;
  right: -10rem;
  background: radial-gradient(circle, rgba(37, 69, 216, 0.8) 0%, transparent 70%);
}

.hero-orb-b {
  width: 26rem;
  height: 26rem;
  bottom: -12rem;
  left: -8rem;
  background: radial-gradient(circle, rgba(18, 161, 142, 0.65) 0%, transparent 70%);
}

.hero-orb-c {
  width: 20rem;
  height: 20rem;
  top: 24%;
  left: 46%;
  background: radial-gradient(circle, rgba(109, 94, 252, 0.5) 0%, transparent 70%);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.hero-glow-a {
  width: 460px;
  height: 460px;
  background: rgba(37, 69, 216, 0.45);
  top: -140px;
  right: -120px;
}

.hero-glow-b {
  width: 380px;
  height: 380px;
  background: rgba(18, 161, 142, 0.35);
  bottom: -160px;
  left: -120px;
}

/* Bottom fade that softens the join between a dark hero and the next section. */
.hero-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8rem;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(10, 19, 34, 0) 0%, rgba(10, 19, 34, 0.35) 100%);
}

/* --- floating geometric shapes ------------------------------------------- */
.shape {
  position: absolute;
  pointer-events: none;
}

.shape-ring {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.shape-square {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(18deg);
}

.shape-dot {
  border-radius: 50%;
  background-image: var(--fc-gradient-brand);
  opacity: 0.55;
}

/* Size + position variants used by the hero decoration layer. */
.shape-ring-a {
  width: 190px;
  height: 190px;
  top: 16%;
  right: 6%;
}

.shape-square-a {
  width: 120px;
  height: 120px;
  top: 24%;
  left: 3%;
}

.shape-dot-a {
  width: 12px;
  height: 12px;
  top: 34%;
  right: 18%;
}

/* --- hero stacking order ------------------------------------------------- */
/* The decoration layer is inserted before the hero content, so the content is
   forced above it: gradients may never wash out the headline. */
.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero .hero-mesh,
.page-hero .hero-grid,
.page-hero .hero-orb,
.page-hero .hero-glow,
.page-hero .hero-scrim,
.page-hero .shape {
  z-index: 0;
}

/* --- hero entrance ------------------------------------------------------- */
/* Pages that mark their hero content with data-reveal use the scroll-reveal
   engine. Everything else gets the same staggered entrance here, so all 19
   heroes animate on load without a single line of JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  html.js .page-hero .breadcrumb-c:not([data-reveal]),
  html.js .page-hero h1:not([data-reveal]),
  html.js .page-hero h1 + p:not([data-reveal]),
  html.js .page-hero .hero-visual:not([data-reveal]),
  html.js .page-hero .tw-flex.tw-flex-wrap.tw-gap-3:not([data-reveal]),
  html.js .page-hero ul.tw-flex:not([data-reveal]) {
    animation: fc-rise 0.85s var(--fc-ease) both;
  }

  html.js .page-hero .breadcrumb-c:not([data-reveal]) {
    animation-delay: 60ms;
  }

  html.js .page-hero h1:not([data-reveal]) {
    animation-delay: 160ms;
  }

  html.js .page-hero h1 + p:not([data-reveal]) {
    animation-delay: 260ms;
  }

  html.js .page-hero .hero-visual:not([data-reveal]) {
    animation-delay: 300ms;
  }

  html.js .page-hero .tw-flex.tw-flex-wrap.tw-gap-3:not([data-reveal]) {
    animation-delay: 340ms;
  }

  html.js .page-hero ul.tw-flex:not([data-reveal]) {
    animation-delay: 420ms;
  }
}

/* Phones: decoration is trimmed so nothing competes with the hero copy. */
@media (max-width: 767.98px) {
  .shape {
    display: none;
  }

  .hero-orb,
  .cta-orb {
    opacity: 0.4;
  }
}

/* --- image reveal / decoration helpers ----------------------------------- */

/* --- framed hero visual with a gradient offset plate --------------------- */
.hero-visual {
  position: relative;
}

.hero-visual::after {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border-radius: var(--fc-radius-panel);
  background: var(--fc-gradient-brand);
  opacity: 0.14;
  z-index: -1;
}

/* --- section ambience ---------------------------------------------------- */
/* A very light radial wash that gives flat sections depth. The negative
   z-index keeps it above the section background but below all content. */
.section-glow {
  position: relative;
}

.section-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(45% 60% at 88% 0%, rgba(37, 69, 216, 0.10) 0%, transparent 70%),
    radial-gradient(40% 55% at 2% 100%, rgba(18, 161, 142, 0.10) 0%, transparent 70%);
}

/* Gradient rule that closes a centred section heading (kept out of the markup
   so every heading on the site gets the identical treatment). */
.section-head .section-title::after {
  content: '';
  display: block;
  width: 96px;
  height: 1px;
  margin: 1.4rem auto 0;
  background-image: linear-gradient(90deg, transparent 0%, rgba(37, 69, 216, 0.55) 50%, transparent 100%);
}

.section-head-start .section-title::after {
  margin-left: 0;
}

.section-head-light .section-title::after {
  background-image: linear-gradient(90deg, transparent 0%, rgba(88, 216, 195, 0.6) 50%, transparent 100%);
}

/* --- CTA banner decoration ----------------------------------------------- */
/* Every layer is drawn INSIDE the panel. The previous version placed its orbs
   mostly outside the clipped area, which is why the banner read as an empty
   box. Content always wins on stacking order, so these layers can never
   interfere with the call to action. */
.cta-banner > .row,
.cta-banner > .container,
.cta-banner > .tw-relative {
  position: relative;
  z-index: 1;
}

.cta-banner .cta-mesh,
.cta-banner .cta-grid,
.cta-banner .cta-hairline,
.cta-banner .cta-orb,
.cta-banner .shape {
  z-index: 0;
}

/* Layered gradient mesh: blue wash top-left, teal bottom-right, indigo bloom
   along the top edge. */
.cta-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(42% 62% at 6% 0%, rgba(37, 69, 216, 0.55) 0%, transparent 68%),
    radial-gradient(38% 55% at 98% 100%, rgba(18, 161, 142, 0.42) 0%, transparent 70%),
    radial-gradient(32% 46% at 62% -12%, rgba(109, 94, 252, 0.5) 0%, transparent 70%);
}

/* Visible (but soft) grid, masked so it fades out towards the edges. */
.cta-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(90% 85% at 50% 45%, #000 22%, transparent 88%);
  mask-image: radial-gradient(90% 85% at 50% 45%, #000 22%, transparent 88%);
}

/* 1px gradient hairline along the top edge - a small premium detail. */
.cta-hairline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0%, rgba(37, 69, 216, 0.85) 28%, rgba(18, 161, 142, 0.85) 72%, transparent 100%);
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.cta-orb-a {
  width: 26rem;
  height: 26rem;
  top: -9rem;
  right: -7rem;
  background: radial-gradient(circle, rgba(37, 69, 216, 0.7) 0%, transparent 70%);
  opacity: 0.55;
}

.cta-orb-b {
  width: 20rem;
  height: 20rem;
  bottom: -8rem;
  left: -6rem;
  background: radial-gradient(circle, rgba(18, 161, 142, 0.6) 0%, transparent 70%);
  opacity: 0.5;
}

.cta-ring-a {
  width: 170px;
  height: 170px;
  top: 12%;
  right: 33%;
  border-color: rgba(255, 255, 255, 0.14);
}

.cta-ring-b {
  width: 96px;
  height: 96px;
  bottom: 14%;
  right: 7%;
  border-color: rgba(255, 255, 255, 0.1);
}

.cta-dot-a {
  width: 10px;
  height: 10px;
  top: 24%;
  right: 20%;
}

.cta-dot-b {
  width: 6px;
  height: 6px;
  bottom: 26%;
  right: 45%;
}

/* --- footer shell -------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background-image: var(--fc-gradient-ink-deep);
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, transparent 0%, rgba(37, 69, 216, 0.7) 35%, rgba(18, 161, 142, 0.7) 65%, transparent 100%);
}

.site-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26rem;
  pointer-events: none;
  background-image: radial-gradient(55% 100% at 12% 0%, rgba(37, 69, 216, 0.32) 0%, transparent 72%),
    radial-gradient(45% 100% at 88% 0%, rgba(18, 161, 142, 0.22) 0%, transparent 72%);
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

/* --- animated gradient background ---------------------------------------- */
.bg-animated-gradient {
  background-image: var(--fc-gradient-brand);
  background-size: 300% 300%;
  background-position: 0% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .bg-animated-gradient {
    animation: fc-gradient-pan 18s ease-in-out infinite;
  }
}

/* --- sheen sweep for buttons and cards ----------------------------------- */
.sheen {
  position: relative;
  overflow: hidden;
}

.sheen::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background-image: var(--fc-gradient-sheen);
  transform: translateX(-160%) skewX(-16deg);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sheen:hover::after,
  .sheen:focus-visible::after {
    animation: fc-sheen 1.1s var(--fc-ease);
  }
}

/* --- logo marquee -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: fc-marquee 40s linear infinite;
  }

  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

/* --- subtle 3D tilt on hover --------------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .tilt-card {
    transform-style: preserve-3d;
    transition: transform var(--fc-dur-3) var(--fc-ease), box-shadow var(--fc-dur-3) var(--fc-ease);
  }

  .tilt-card:hover {
    transform: perspective(1200px) rotateX(2.5deg) rotateY(-3deg) translateY(-6px);
  }
}

/* --- floating / morphing decorative animation ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .float-slow {
    animation: fc-float-y 9s ease-in-out infinite;
  }

  .float-slower {
    animation: fc-float-x 13s ease-in-out infinite;
  }

  .float-rotate {
    animation: fc-float-rotate 12s ease-in-out infinite;
  }

  .blob-slow {
    animation: fc-blob 20s ease-in-out infinite;
  }

  .glow-pulse {
    animation: fc-pulse-glow 8s ease-in-out infinite;
  }

  .draw-x {
    transform-origin: left center;
    animation: fc-draw-x 1.4s var(--fc-ease) both;
  }
}

/* --- keyframes ----------------------------------------------------------- */
/* Declared here (not in the Tailwind layer) because hand-written rules above
   reference them, and Tailwind only emits keyframes for utilities that are
   actually found in the markup. */
@keyframes fc-gradient-pan {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes fc-sheen {
  0% {
    transform: translateX(-160%) skewX(-16deg);
  }

  100% {
    transform: translateX(260%) skewX(-16deg);
  }
}

@keyframes fc-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes fc-float-y {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -18px, 0);
  }
}

@keyframes fc-float-x {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(14px, -26px, 0);
  }
}

@keyframes fc-float-rotate {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }

  50% {
    transform: rotate(7deg) translateY(-16px);
  }
}

@keyframes fc-blob {
  0%,
  100% {
    border-radius: 52% 48% 60% 40% / 50% 55% 45% 50%;
    transform: scale(1);
  }

  33% {
    border-radius: 40% 60% 45% 55% / 60% 45% 55% 40%;
    transform: scale(1.05);
  }

  66% {
    border-radius: 60% 40% 52% 48% / 45% 60% 40% 55%;
    transform: scale(0.97);
  }
}

@keyframes fc-pulse-glow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.07);
  }
}

@keyframes fc-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fc-dropdown-in {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fc-draw-x {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------------
   7. ARTICLE / LEGAL TYPOGRAPHY
      blog-details.html, privacy-policy.html, terms.html
   -------------------------------------------------------------------------- */
.article-body {
  color: var(--fc-ink-700);
  font-size: 1.0625rem;
  line-height: 1.85;
}

.article-body > * + * {
  margin-top: 1.35rem;
}

.article-body h2 {
  margin-top: 2.75rem;
  font-size: 1.625rem;
  line-height: 1.3;
}

.article-body h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
}

.article-body ul,
.article-body ol {
  padding-left: 1.35rem;
}

.article-body ul {
  list-style: disc;
}

.article-body ol {
  list-style: decimal;
}

.article-body li + li {
  margin-top: 0.5rem;
}

.article-body blockquote {
  margin: 2rem 0;
  padding: 1.35rem 1.6rem;
  border-left: 3px solid transparent;
  border-image: var(--fc-gradient-brand) 1;
  background: var(--fc-gradient-brand-soft);
  border-radius: 0 var(--fc-radius-card) var(--fc-radius-card) 0;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--fc-ink-900);
}

.article-body figure img {
  border-radius: var(--fc-radius-card);
}

.article-body figcaption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--fc-ink-500);
  text-align: center;
}

/* In-page anchors must not hide under the sticky header. */
[id] {
  scroll-margin-top: calc(var(--fc-header-height) + 24px);
}

/* --------------------------------------------------------------------------
   8. ACCESSIBILITY / MOTION + PERFORMANCE SAFEGUARDS
   -------------------------------------------------------------------------- */

/* Reduced motion: nothing moves, nothing fades, everything stays visible. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  html.js [data-reveal] .img-curtain::after {
    transform: scaleX(0) !important;
  }

  .marquee-track {
    animation: none !important;
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard users must be able to see focus inside dark sections */
.section-dark :focus-visible,
.page-hero :focus-visible,
.site-footer :focus-visible,
.site-header--overlay :focus-visible {
  outline-color: var(--fc-accent-300);
}

/* Coarse pointers (touch): drop effects that only make sense with a mouse so
   phones never pay for hover transitions they cannot trigger. */
@media (hover: none) {
  .tilt-card:hover {
    transform: none;
  }

  .card-hover:hover,
  .card-surface:hover,
  .card-elevated:hover,
  .card-dark:hover,
  .step-item:hover,
  .quote-card:hover,
  .sector-tile:hover,
  .feature-tile:hover,
  .job-row:hover,
  .stat-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   9. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .float-top,
  .cta-banner,
  footer,
  .no-print {
    display: none !important;
  }

  body {
    color: #000;
  }

  .page-hero,
  .section-dark,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .page-hero h1,
  .page-hero p,
  .section-dark h2,
  .section-dark p {
    color: #000 !important;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
  }
}