html { scroll-behavior: smooth; overflow-x: hidden; }
  body { font-family: 'Hanken Grotesk', sans-serif; font-weight: 400; background:#fbf8f2; color:#0a1830; -webkit-font-smoothing:antialiased; overflow-x: hidden; max-width: 100vw; }
  h1,h2,h3,.font-display { font-family:'Archivo', sans-serif; font-weight: 800 !important; letter-spacing: -0.01em; }
  ::selection { background:#2f6df5; color:#fff; }
  .noise { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }

  .header-text { color: #142c52; transition: color .35s ease, opacity .2s ease; }
  .header-text:hover { opacity: .72; }

  .hero-bg-slide, .leadform-bg-slide { transition: opacity 2s ease-in-out; }

  .reveal { opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
  .reveal.left { transform:translateX(-32px); }
  .reveal.right { transform:translateX(32px); }
  .reveal.in { opacity:1; transform:translate(0,0); }

  .float-card { animation: floaty 3.4s ease-in-out infinite; }
  @keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

  .headline-line span { display:inline-block; }

  .tab-panel { display:none; }
  .tab-panel.active { display:grid; }

  .accordion-content { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1); }

  .testimonial-slide { display:none; }
  .testimonial-slide.active { display:block; animation: fadein .4s ease; }
  @keyframes fadein { from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:translateX(0);} }

  .process-step { transition: opacity .4s ease; }

  input:focus, select:focus, textarea:focus, button:focus-visible { outline:2px solid #2f6df5; outline-offset:2px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }

  /* --- custom fixes (base stylesheet is statically compiled; new utility
     classes must be defined explicitly here) --- */
  .bl-section-pad { padding-top:5rem; padding-bottom:5rem; }
  @media (min-width:1024px){ .bl-section-pad { padding-top:7rem; padding-bottom:7rem; } }

  .bl-hero-pad { padding-top:8rem; padding-bottom:4rem; }
  @media (min-width:1024px){ .bl-hero-pad { padding-top:9rem; padding-bottom:5rem; } }

  .bl-footer-pad { padding-top:4rem; }

  .bl-ratio-4-3 { aspect-ratio: 4 / 3; }
  .bl-max-w-4xl { max-width:56rem; }

  header#site-header { background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 0 rgba(10,24,48,0.06), 0 8px 24px -8px rgba(10,24,48,0.12); }
  header#site-header.is-scrolled { background:rgba(251,248,242,.94); }

  .bl-logo-icon { width:2.25rem; height:2.25rem; border-radius:.6rem; background:linear-gradient(135deg,#FFBE3C 0%,#0071CE 55%,#67C9BA 100%); flex-shrink:0; }

  .hero-product-btn:hover { color:#fbf8f2; }
  .bl-grid-hero, .bl-grid-team, .bl-grid-faq, .bl-grid-form { grid-template-columns: 1fr; }
  @media (min-width:1024px){
    .bl-grid-hero { grid-template-columns: 1.05fr .95fr; }
    .bl-grid-team { grid-template-columns: .85fr 1.15fr; }
    .bl-grid-faq { grid-template-columns: 1fr 300px; }
    .bl-grid-form { grid-template-columns: 1fr 360px; }
  }

  .bl-logo-w { width: 110px; }
  :where(.grid-cols-1) { grid-template-columns: repeat(1, minmax(0, 1fr)); }

  .bl-services-grid {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem;
    scrollbar-width: none; -ms-overflow-style: none; scroll-padding-left: 16px; scroll-padding-right: 16px;
  }
  .bl-services-grid::-webkit-scrollbar { display: none; }
  .bl-services-grid > .service-card { flex: 0 0 auto; scroll-snap-align: start; width: 82vw; max-width: 320px; }
  @media (min-width:640px){ .bl-services-grid > .service-card { width: 55vw; max-width: 360px; } }
  @media (min-width:1024px){
    .bl-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
    .bl-services-grid > .service-card { width: auto; max-width: none; }
  }
  @media (min-width:1280px){ .bl-services-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: .75rem; } }

  #services-track, #testimonials-track, .bl-pricing-track { scroll-padding-left: 24px; scroll-padding-right: 24px; }
  @media (min-width:1024px){
    #services-track, #testimonials-track { scroll-padding-left: 40px; scroll-padding-right: 40px; }
  }

  .bl-pricing-track {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 2rem;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .bl-pricing-track::-webkit-scrollbar { display: none; }
  .bl-pricing-card { flex: 0 0 auto; scroll-snap-align: start; width: 85vw; max-width: 22rem; }

  /* hard safety net: text can never visually break out of a card, regardless of
     the visitor's browser font-size/zoom settings */
  .service-card, .bl-pricing-card, .testimonial-card {
    overflow-wrap: break-word; word-break: break-word; min-width: 0;
  }
  .service-card * , .bl-pricing-card *, .testimonial-card * {
    overflow-wrap: break-word; word-break: break-word; min-width: 0;
  }
  .pricing-cta-dark:hover { background: #010f4d; }
  @media (min-width:1024px){
    .bl-pricing-track { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; overflow: visible; margin: 0; padding: 0; padding-top: 2rem; }
    .bl-pricing-card { width: auto; max-width: none; }
  }

  /* keep hero height stable across service rotations regardless of text length */
  #hero-headline { min-height: 4.3em; }
  #hero-subtext { min-height: 88px; }
  #hsp-desc { min-height: 4.9em; }
  @media (min-width:640px){
    .bl-logo-h { height: 3rem; }
    .bl-logo-w { width: 140px; }
    .bl-cta-text { font-size: .875rem; line-height: 1.25rem; }
  }


  .border-navy-950\/12 { border-color: rgba(1,27,113,.12); }
  .from-navy-950\/96 { --tw-gradient-from: rgba(1,27,113,.96); --tw-gradient-to: rgba(1,27,113,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
  .via-navy-950\/97 { --tw-gradient-to: rgba(1,27,113,0); --tw-gradient-stops: var(--tw-gradient-from), rgba(1,27,113,.97) var(--tw-gradient-via-position), var(--tw-gradient-to); }
  .shadow-\[0_0_20px_rgba\(43\,138\,218\,0\.35\)\] { box-shadow: 0 0 20px rgba(43,138,218,.35); }
  .bg-navy-950\/90 { background-color: rgba(1,27,113,.9); }
  
#f-service option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

#f-service option[value=""] {
  color: #64748b !important;
}