/*
==================================================================
TIMETRAX DARK BANDS
Loaded on index.html after style.css and benefits-showcase.css.

There is no theme switcher any more. The page is one fixed design
that alternates dark and light bands top to bottom:

  1. Hero .......................... light  (style.css default)
  2. Client ticker ................. light  (style.css default)
  3. HCM dashboard showcase ........ DARK   (.tt-hcm-dark, styled in style.css)
  4. Benefits showcase ............. light
  5. Modules (38+ super modules) ... light
  6. Testimonials .................. DARK   (with LIGHT cards - see section 2)
  7. Awards ........................ light
  8. Integrations .................. DARK
  9. Mobile app .................... light
 10. Contact ...................... light
 11. Footer ....................... DARK   (already dark in style.css)

Light bands need nothing here - they use the defaults in style.css.
The header is left on its light default too: it floats over the
light hero, which is the first thing anyone sees.

Two different techniques are used for dark bands, on purpose:

  * Integrations re-points the design tokens on the section itself,
    so every descendant flips to dark-band treatment for free.
  * Testimonials does NOT re-point tokens. Its cards must stay
    light, and they already read their surface from the light
    --tt-glass-* tokens - so only the backdrop and the section
    heading are overridden and the cards keep working untouched.
==================================================================
*/

/* --- 1. INTEGRATIONS (dark band, dark contents) ---
   Token re-map is scoped to the section, so it only affects this band. */
.tt-integrations-section {
  /* Text: what is near-black ink on light bands becomes near-white */
  --tt-dark: #F2F3F6;
  --tt-dark-rgb: 242, 243, 246;
  --tt-dark-light: #C9CCD2;
  --tt-secondary: #E8E9EC;
  --tt-secondary-hover: #FFFFFF;
  --tt-muted: #A7ADB8;

  /* Surfaces & lines */
  --tt-light: #22242A;
  --tt-border: rgba(255, 255, 255, 0.1);

  /* Glassmorphism surfaces become dark glass */
  --tt-glass-bg: rgba(24, 25, 30, 0.55);
  --tt-glass-bg-soft: rgba(30, 32, 38, 0.72);
  --tt-glass-border: rgba(255, 255, 255, 0.09);
  --tt-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

  background: #121317;
}

.tt-integrations-heading {
  color: #F0F1F4;
}

.tt-integrations-copy {
  color: #AEB4BE;
}

/* --- 2. TESTIMONIALS (dark band, LIGHT cards) ---
   Deliberately no token re-map here. .tt-testimonial-card draws its surface
   from --tt-glass-bg-soft / --tt-glass-border and its text from hardcoded dark
   hex values, so leaving the tokens alone keeps every card a light glass panel
   with readable dark text floating on the dark band - which is the effect we
   want. Only the backdrop and the section's own heading change. */
.tt-testimonials-section {
  background: #131418;
}

.tt-testimonials-heading {
  color: #F0F1F4;
}

/* The ambient accent blobs were tuned for a light backdrop; on dark they need
   more strength to register at all. */
.tt-testimonials-section::before {
  background: none;
}

.tt-testimonials-section::after {
  background: none;
}

/* Cards are near-white glass on a dark band, so they need a real cast shadow to
   sit above it rather than the soft bluish one used on light backgrounds. */
.tt-testimonial-card {
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}