/* Theme based on mainlogo.png: deep blues with bright accents */
:root{
  --blue-900:#042a52;
  --blue-700:#0b5394;
  --blue-500:#1e73be;
  --accent:#ffd166;
  --muted:#6b7785;
  --bg:#ffffff;
}
/* Global fold spacing rhythm */
.tt-ticker-section,
.tt-modules-section,
.tt-testimonials-section,
.tt-awards-section,
.tt-integrations-section,
.tt-mobile-app-section,
.tt-contact-section {
  padding-bottom: var(--tt-section-space);
  padding-top: var(--tt-section-space);
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#07203b; background:var(--bg);}
.container{max-width:1100px;margin:0 auto;padding:12px}
.site-header{background:white;position:sticky;top:0;left:0;right:0;z-index:20;box-shadow:0 2px 20px rgba(6,15,32,0.08);}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo img{height:50px;width:160px;}
.nav{display:flex;gap:16px}
.nav a{color:var(--blue-900);text-decoration:none;font-weight:600}
.nav-toggle{display:none;background:transparent;border:none;font-size:20px}
.hero{background:linear-gradient(180deg, rgba(30,115,190,0.06), transparent);padding:64px 0;text-align:center}
.hero h1{font-size:44px;margin:0;color:var(--blue-900);letter-spacing:1px}
.hero .tag{color:var(--blue-700);font-weight:700;margin-top:8px}
.hero .lead{color:var(--muted);max-width:700px;margin:12px auto;font-size:18px}
.cta{display:inline-block;margin-top:18px;background:var(--blue-700);color:white;padding:12px 20px;border-radius:6px;text-decoration:none;font-weight:700}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:28px}
.card{background:white;padding:18px;border-radius:10px;box-shadow:0 6px 20px rgba(6,15,32,0.06)}
.card h3{margin:0 0 8px;color:var(--blue-900)}
.brands{margin-top:36px}
.brand-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:12px 0}
.brand-list li{background:linear-gradient(90deg, rgba(6,30,82,0.06), rgba(30,115,190,0.02));padding:8px 12px;border-radius:8px;color:var(--blue-700);font-weight:600}
.contact{margin:36px 0;padding:18px;background:white;border-radius:10px;box-shadow:0 6px 20px rgba(6,15,32,0.06)}
.contact-info{margin:8px 0;color:var(--muted)}
.site-footer{padding:18px 0;text-align:center;color:var(--muted);margin-top:28px}
@media(max-width:800px){
  .nav{display:none}
  .nav-toggle{display:block}
  .logo img{height:52px}
  .hero h1{font-size:32px}
}

/* --- 7. BRAND LOGO TICKER SECTION --- */

.tt-ticker-section {
  /* Soft neutral band rather than white: it separates the light hero above
     from the dark HCM band below, and gives the (mostly white-background)
     client logos something to sit on. */
  background-color: #F4F5F7;
  padding: 1.9rem 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-top: 1px solid rgba(16, 24, 40, 0.05);
  border-bottom: 1px solid rgba(16, 24, 40, 0.07);
}

/* Standing label on the left, scrolling logos on the right, split by a rule. */
.tt-ticker-layout {
  align-items: center;
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.tt-ticker-label {
  border-right: 1px solid rgba(16, 24, 40, 0.14);
  flex: 0 0 auto;
  max-width: 250px;
  padding-right: clamp(1.5rem, 3vw, 2.75rem);
}

.tt-ticker-label-text {
  color: var(--tt-dark);
  font-family: var(--tt-font-secondary);
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.tt-ticker-container {
  display: flex;
  flex: 1 1 auto;
  min-width: 0; /* Lets the flex item shrink so the track can overflow-hide */
  overflow: hidden;
  position: relative;
}

/* Fades live on the logo lane, not the section - they must start after the
   label's divider, otherwise they wash the label out too. */
.tt-ticker-container::before,
.tt-ticker-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 6%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.tt-ticker-container::before {
  left: 0;
  background: none;
}

.tt-ticker-container::after {
  right: 0;
  background: none;
}

.tt-ticker-track {
  display: flex;
  flex-wrap: nowrap; /* Enforce absolutely no wrapping of the track elements */
  width: max-content;
  animation: ttTickerScroll 70s linear infinite; /* Paced for 17 logos/group - keeps the same slow px/sec as the original 11-logo 45s */
  will-change: transform; /* Hint GPU for optimal rendering layers */
  position: relative;
  z-index: 1; /* Keep readable below container's shadow gradient overlay mask */
}

/* Pause on hover to allow users to interact with client references */
.tt-ticker-track:hover {
  animation-play-state: paused;
}

.tt-ticker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 200px; /* Fixed item width (independent of each logo's own aspect ratio) so the track's total
                       width is deterministic from first paint - prevents the transform's -50% end point
                       from shifting (and visibly jumping) as images finish loading asynchronously. */
  width: 200px;
  padding: 0 1.25rem;
}

.tt-ticker-logo {
  height: 68px !important; /* Larger, more visible sizing */
  width: auto !important; /* Restored width-auto so that different logo shapes layout naturally */
  max-width: 160px !important; /* Cap width to prevent oversized horizontal expansion */
  object-fit: contain !important;
  filter: grayscale(0%) contrast(1.05); /* Completely colorful and crisp corporate colors */
  opacity: 1 !important; /* Solid visibility as shown in screenshot crop */
  transition: var(--tt-transition-standard);
  display: block;
}

.tt-ticker-logo:hover {
  transform: scale(1.08); /* Sophisticated light scale layout zoom */
}

/* Glitchless Hardware Accelerated translation keyframes standard */
@keyframes ttTickerScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0); /* Loop resets exactly on Group duplication point */
  }
}

@media (max-width: 767.98px) {
  .tt-ticker-section {
    padding: 1.5rem 0;
  }

  /* Side by side leaves the logo lane too narrow to read - stack the label
     above the strip and turn its divider into an underline. */
  .tt-ticker-layout {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }

  .tt-ticker-label {
    border-bottom: 1px solid rgba(16, 24, 40, 0.12);
    border-right: 0;
    max-width: none;
    padding-bottom: 0.9rem;
    padding-right: 0;
    text-align: center;
  }

  .tt-ticker-logo {
    height: 48px !important; /* Balanced for mobile viewports */
    max-width: 120px !important;
  }

  .tt-ticker-item {
    flex: 0 0 140px;
    width: 140px;
    padding: 0 1rem;
  }
}

/* Map responsive wrapper */
.map-wrap{margin-top:18px;border-radius:10px;overflow:hidden;box-shadow:0 6px 20px rgba(6,15,32,0.06)}
.map-wrap iframe{width:100%;height:360px;border:0;display:block}

/* WhatsApp floating button */
.whatsapp-float{position:fixed;right:20px;bottom:20px;background:#25D366;color:white;padding:12px 16px;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 8px 20px rgba(2,48,22,0.2);z-index:9999}
.whatsapp-float:hover{transform:translateY(-2px)}

@media(max-width:420px){
  .whatsapp-float{right:14px;bottom:14px;padding:10px 12px}
  .map-wrap iframe{height:260px}
}