html {
  overflow-x: hidden;
}

body {
  font-family: 'Barlow', sans-serif;
  background: #000;
  color: #fffeff;
  overflow-x: hidden;
  /* Prevent horizontal scroll on all devices */
  /* overflow-y: visible removed — invalid when overflow-x: hidden is set (CSS spec §overflow-3).
     Browser computes overflow-y: auto in this case regardless. (Issue 2.4) */
}

/* 
 * IMPORTANT USAGE DOCUMENTATION
 * 
 * This stylesheet uses !important in the following scenarios:
 * 
 * 1. BOOTSTRAP OVERRIDES (lines 80, 96, 100, 116, 132, 136)
 *    - Required to override Bootstrap's default navbar and nav-link styles
 *    - Alternative: Increase selector specificity, but would require restructuring HTML
 *    - WordPress Note: Customizer may have difficulty overriding these
 * 
 * 2. REDUCED MOTION ACCESSIBILITY (lines 21-24)
 *    - Required to ensure ALL animations are disabled for users with prefers-reduced-motion
 *    - Must override any inline styles or animation libraries (GSAP)
 *    - WCAG 2.1 SC 2.3.3 compliance - non-negotiable
 * 
 * 3. DEVICE-SPECIFIC FLOATER SIZING (lines 494+, multiple instances)
 *    - Required to override default responsive floater sizing for specific devices
 *    - Floaters use vw units and need precise control per device breakpoint
 *    - Alternative: Restructure floater CSS to avoid conflicts, but high risk of breaking design
 *    - WordPress Note: Will likely be redesigned during theme migration
 * 
 * RECOMMENDATION: Document each !important with a comment explaining WHY it's needed.
 * When migrating to WordPress, review all !important declarations and replace with
 * higher-specificity selectors where possible to improve Customizer compatibility.
 */

/* Ensure images are responsive on mobile */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Accessibility: Respect reduced motion preferences
 *
 * Issue 7.2 — Coverage audit (all correct, documented here for future maintainers):
 *
 * CSS animations covered by this block:
 *   - breathe @keyframes on .industry__card-icon img and .heading__card-icon img
 *   - tlFloatUp / tlFloatDown @keyframes on .footer__float elements
 *   - All CSS transitions (hover transforms on cards, nav links, logo items)
 *
 * GSAP animations: guarded separately in animations.js via:
 *   const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 *   All GSAP tweens are wrapped in `if (!prefersReducedMotion)` blocks.
 *
 * Note: The GSAP fallback (gsap === undefined) in index.htm also sets opacity:1
 * on all content sections, so content is never hidden even if GSAP fails to load.
 */
@media (prefers-reduced-motion: reduce) {

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

/* Accessibility: Touch targets and focus states */
/* Ensure minimum 44x44px touch targets for mobile (Apple HIG guideline) */
.header__nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
}

/* Touch feedback for interactive elements */
.header__nav-link:active {
  opacity: 0.7;
  transform: scale(0.98);
}

.cta__btn:active,
.hero__btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 172, 181, 0.3);
}

/* Visible focus indicator for keyboard navigation */
*:focus-visible {
  outline: 2px solid #00acb5;
  outline-offset: 2px;
}

/* Remove default outline for mouse users, keep for keyboard */
*:focus:not(:focus-visible) {
  outline: none;
}

a:hover {
  color: #ffffff;
}

/* ====================
   HEADER / NAVBAR
   ==================== */

.header {
  background: transparent;
  position: absolute;
  width: 100%;
  max-width: 100%;
  z-index: 999;
  padding: 20px 0;
}

.header__brand {
  font-weight: 700;
  font-size: 26px;
  /* !important needed to override Bootstrap's .navbar-brand default color */
  color: #fff !important;
}

.header__logo {
  width: 130px;
}

.header__nav-link {
  color: #fffeff;
  font-size: 15px;
  /* updated as per PSD design */
  letter-spacing: 1px;
  margin-left: 25px;
  transition: 0.3s;
}

.header__nav-link:hover {
  /* !important needed to override Bootstrap's .nav-link hover state */
  color: #00acb5 !important;
}

.header__nav-link--active {
  /* !important needed to override Bootstrap's .nav-link.active state */
  color: #00acb5 !important;
}

/* .custom-navbar removed — duplicate of .header (Issue 1.1) */

/* .logo and .logo-sty removed — duplicates of .header__brand and .header__logo (Issue 1.1) */

/* .navbar-nav .nav-link rules removed — duplicates of .header__nav-link (Issue 1.1)
   Bootstrap nav functionality is preserved; styling is handled by .header__nav-link only */


@media (max-width: 991px) {

  .header__collapse,
  .navbar-collapse {
    background: #000;
    padding: 20px;
    margin-top: 10px;
    /* Issue 1.2: Force stacking context above section floaters (z-index: 2) and
       compositing layer to prevent Safari bleed-through when scrolled */
    position: relative;
    z-index: 1000;
  }

  .header__nav-link,
  .navbar-nav .nav-link {
    margin: 10px 0;
  }
}

.hero {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #0a0a0a 0%, #000000 50%, #0d0d0d 100%);
  padding-top: 100px;
  padding-bottom: 0;
  position: relative;
  z-index: 1;
  /* Issue 2.1: Keep hero overflow visible so sticky stats can release cleanly.
     Floaters stay contained by their own positioning and z-index instead of
     clipping the hero container. */
  overflow: clip;
}

/* Hero container - make it flex to allow content centering */
.hero > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mobile breathing space for hero - same as other sections */
@media (max-width: 576px) {
  .hero > .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Stats wrapper to push to bottom of hero */
.hero__stats-wrapper {
  margin-top: auto;
  width: 100%;
  flex-shrink: 0; /* Never compress the stats bar when content is tall */
  flex-grow: 0; /* Don't grow, just stay at bottom */
  align-self: stretch; /* Stretch to full width */
}

/* Mobile - proper spacing between hero content and stats */
@media (max-width: 576px) {
  /* hero__stats-wrapper: margin-top: auto from base rule is intentionally preserved.
     No override here — auto is what pins the stats bar to the bottom. */

  .hero__content {
    margin-bottom: 0;
  }

  .stats {
    margin-top: 0;
    padding-top: 0;
  }

  /* Increase hero floater opacity on mobile for better visibility */
  .hero__floater--bottom-left,
  .hero__floater--top-right {
    opacity: 0.85 !important;
    filter: brightness(0.7) saturate(1.1);
  }

  /* Lighten overlay to show more floater detail */
  .hero::before {
    background: rgba(0, 0, 0, 0.1) !important;
  }
}

/* Short viewports - add spacing to prevent overlap */
@media (max-height: 700px) {
  .hero__content {
    padding-top: 0;
  }
}

@media (max-height: 600px) {
  .hero__content {
    padding-top: 10px;
  }

  .hero__title {
    font-size: clamp(24px, 5.5vw, 60px);
  }
}

/* Hero section floaters */
.hero__floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  opacity: 0.25;
  /* Very translucent to keep content in focus */
  filter: brightness(0.5);
  /* Significantly darken floaters */
}

/* Overlay on top of floaters to further dim them */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  pointer-events: none;
}

/* Lighter overlay on mobile since floaters are larger */
@media (max-width: 576px) {
  .hero::before {
    background: rgba(0, 0, 0, 0.2);
  }
}

/* Bottom-left floater - covers left side */
.hero__floater--bottom-left {
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  margin-bottom: -25vh;
  margin-left: -12.5vw;
  opacity: 1;
  object-fit: cover;
  height: auto;
}

/* Top-right floater - covers right side */
.hero__floater--top-right {
  top: 0;
  right: 0;
  width: 100%;
  /* Use 100% instead of 100vw so it's bounded by the hero container */
  max-width: 100%;
  margin-top: -25vh;
  margin-right: 0;
  /* Remove negative margin that caused overflow beyond hero */
  opacity: 1;
  object-fit: cover;
  z-index: -1;
  height: auto;
}

/* Large screens - prevent overlap */
@media (min-width: 1920px) {
  .hero__floater--bottom-left {
    width: 85%;
    margin-left: 0;
  }

  .hero__floater--top-right {
    width: 85%;
    margin-right: 0;
  }
}

/* Short viewports - reduce vertical overlap */
@media (max-height: 600px) {
  .hero__floater--bottom-left {
    margin-bottom: 10vh;
  }

  .hero__floater--top-right {
    margin-top: -15vh;
  }
}

@media (max-height: 500px) {
  .hero__floater--bottom-left {
    margin-bottom: 8vh;
  }

  .hero__floater--top-right {
    margin-top: -10vh;
  }
}

.hero__content {
  max-width: 820px;
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  padding-top: 0;
}

.hero__content>* {
  flex-shrink: 0;
}

.hero__title {
  /* Issue 2.2: clamp() replaces fixed 60px + two breakpoint overrides.
     Scales smoothly: ~32px at 576px → ~54px at 992px → 60px cap at 1090px+
     Eliminates font-size rules in the 992px and 576px media query blocks below. */
  font-size: clamp(32px, 5.5vw, 60px);
  font-weight: 500;
  /* updated as per PSD design */
  line-height: 1.2;
}

.hero__title-accent {
  color: #00acb5;
  font-style: italic;
}

.hero__text {
  margin-top: 25.5px;
  color: #fffeff;
  /* updated as per PSD design */
  font-size: 25.5px;
}

.hero__btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 30px;
  border: 2px solid #fffeff;
  /* updated as per PSD design */
  border-radius: 30px;
  color: #fffeff;
  /* updated as per PSD design */
  text-decoration: none;
  transition: 0.3s;
  align-self: flex-start;
}

.hero__btn:hover {
  background: #00acb5;
  border-color: #00acb5;
}


.stats {
  background: #00acb5;
  /* REDUCED PADDING: Less vertical space */
  padding: 25px 0px 30px;
  position: sticky;
  bottom: env(safe-area-inset-bottom, 0);
  z-index: 10;
  /* Keep stats above floaters */
  overflow: clip;
  /* Ensure consistent height */
  min-height: auto;
  height: auto;
}

.stats {
  @supports (padding: max(0px)) {
    padding-bottom: max(30px, env(safe-area-inset-bottom, 30px));
    will-change: background-color;
    contain: layout style paint;
  }
}

/* Issue 2.3: Desktop stats layout is now controlled by Swiper's built-in breakpoints config
   in the Stats Carousel Initialization script (see index.htm).
   The previous transform:none / display:flex overrides have been removed because they
   created a race condition at the 577px resize boundary where Swiper's internal
   currentTranslate state would desync from the CSS-forced layout. */

/* Desktop Swiper slide styling - ensure icon and text stay on one line */
.stats-carousel .swiper-slide {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.stats__item {
  display: flex;
  flex-wrap: nowrap;
  /* ALIGNMENT FIX: Center items vertically */
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 0 0 33.333%;
  max-width: 33.333%;
  /* REDUCED PADDING: Remove vertical padding */
  padding: 0 15px;
  /* Ensure consistent baseline */
  line-height: 1;
  /* Prevent extra height */
  min-height: auto;
}

/* ==========================================
   STATS ALIGNMENT FIX
   .stats__icon and .stats__text must share
   the same vertical alignment baseline.
   ========================================== */

.stats__text {
  /* opacity: 0; JS animates this */
  margin-top: 0;
  font-weight: 700;
  /* updated as per PSD design */
  font-size: 15px;
  /* updated as per PSD design */
  color: #fffeff;
  /* updated as per PSD design */
  margin-bottom: 0;
  white-space: nowrap;
  /* ALIGNMENT FIX: Reset transform for proper alignment */
  transform: none;
  /* ALIGNMENT FIX: Use tight line-height */
  line-height: 1;
  /* ALIGNMENT FIX: Center vertically with parent flex */
  display: flex;
  align-items: center;
  vertical-align: middle;
  /* Prevent extra height */
  height: auto;
  min-height: auto;
  padding: 0;
}

.js-animations-ready .stats__text {
  /* JS controls opacity — no CSS transition conflict */
}

.stats__icon {
  /* ALIGNMENT FIX: Center icon vertically */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Remove font-size, let image determine size */
  font-size: 0;
  line-height: 0;
  /* Ensure no extra space */
  vertical-align: middle;
  /* Prevent extra height */
  height: auto;
  min-height: auto;
}

.stats__icon img,
.stats__icon svg {
  width: 40px;
  flex-shrink: 0;
  /* ALIGNMENT FIX: Display as block to remove inline spacing */
  display: block;
  /* ALIGNMENT FIX: Ensure image is centered */
  margin: 0 auto;
}

@media (min-width: 1025px) {
  .stats {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0);
    z-index: 10;
  }
}
/* ===== MOBILE: Use relative (avoid sticky issues) ===== */
@media (max-width: 1024px) {
  .stats {
    position: relative !important;
    bottom: auto !important;
    z-index: 10;
  }
}

/* Small mobile adjustments - CAROUSEL MODE - FULL WIDTH */
@media (max-width: 576px) {
  .hero__stats-wrapper {
    /* margin-top intentionally not set here — auto from base rule pins stats to bottom */
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .stats {
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .stats .container {
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
  }

  /* Swiper carousel - ensure full width */
  .stats-carousel.swiper {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .stats-carousel .swiper-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .stats-carousel .swiper-slide {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* Each item takes full viewport width */
  .stats__item {
    min-width: 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* ALIGNMENT FIX: Center vertically */
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    box-sizing: border-box;
    line-height: 1;
    min-height: auto;
  }

  .stats__text {
    font-size: 14px;
    white-space: nowrap;
    margin: 0;
    /* ALIGNMENT FIX: Reset transform, use natural alignment */
    transform: none;
    line-height: 1;
    display: flex;
    align-items: center;
    vertical-align: middle;
    padding: 0;
    min-height: auto;
  }

  .stats__icon {
    /* ALIGNMENT FIX: Consistent alignment for mobile */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
  }

  .stats__icon img,
  .stats__icon svg {
    width: 35px;
    flex-shrink: 0;
    display: block;
    margin: 0 auto;
  }
}

.stats__item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.stats__text {
  margin-top: 0;
  font-weight: 700;
  /* updated as per PSD design */
  font-size: 15px;
  /* updated as per PSD design */
  color: #fffeff;
  /* updated as per PSD design */
  margin-bottom: 0;
  white-space: nowrap;
}

.stats__icon {
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}



@media (max-width: 992px) {
  /* hero__title font-size removed — handled by clamp() on the base rule (Issue 2.2) */

  .hero__floater--bottom-left {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 10vh;
  }

  .hero__floater--top-right {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  /* Full-width stats carousel for tablets and below */
  .stats {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .stats .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Tablet Portrait Mode - Surface Pro, iPad Portrait (768px - 912px) */
@media (max-width: 912px) and (min-width: 769px) {
  .hero__floater--bottom-left {
    width: 100%;
    max-width: 100%;
    margin-bottom: 15vh;
    left: 0;
    opacity: 0.9;
  }

  .hero__floater--top-right {
    width: 100%;
    max-width: 100%;
    margin-top: -7vh;
    right: 0;
    opacity: 0.95;
  }

  /* Full-width stats carousel for tablet portrait */
  .stats {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .stats .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


@media (max-width: 576px) {
  .hero {
    text-align: center;
    overflow: visible;
    min-height: 100svh;
    height: 100svh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
  }

  .hero__content {
    padding-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
  }

  /* hero__stats-wrapper: margin-top: auto from base rule is intentionally preserved.
     No override here — auto is what pins the stats bar to the bottom. */

  /* hero__title font-size removed — handled by clamp() on the base rule (Issue 2.2) */
  .hero__title-accent {
    hyphens: none;
  }

  .hero__text {
    font-size: 16px;
  }

  .hero__btn {
    padding: 10px 20px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Mobile floaters - contained within hero's overflow:hidden */
  .hero__floater--bottom-left {
    width: 100%;
    /* Fill hero width; hero's overflow:hidden clips the rest */
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 10vh;
    /* Pull up to avoid stats carousel overlap */
    left: 0;
    opacity: 0.7;
  }

  .hero__floater--top-right {
    width: 100%;
    max-width: 100%;
    margin-top: -4vh;
    margin-right: 0;
    right: 0;
    opacity: 0.85;
  }
}

/* iPhone 14 Pro Max - show full floater image */
/* ==========================================
   HERO FLOATER MOBILE TIERS — Issue 7.1
   Replaced 6 overlapping device-specific blocks (376–430px, 390–430px,
   360–390px, 320–360px, max-375px, 340–375px) with 3 clean tiers.

   Rationale: The per-device opacity differences (0.7 / 0.75 / 0.8 / 0.85 / 0.9)
   are imperceptible at ~5% increments — no user will notice their specific device's
   0.05 opacity difference. Collapsed to 0.75 across all phones ≤430px.

   The stats carousel !important overrides inside these blocks are removed:
   Swiper's native breakpoints config (Issue 2.3) handles that layout now.
   ========================================== */

/* All phones ≤430px: consistent floater treatment */
@media (max-width: 430px) {

  .hero__floater--bottom-left,
  .hero__floater--top-right {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    opacity: 0.75;
  }

  .hero__floater--bottom-left {
    margin-bottom: 10vh;
    bottom: 0;
    left: 0;
  }

  .hero__floater--top-right {
    margin-top: -7vh;
    top: 0;
    right: 0;
  }

  /* Subtle overlay — lighter than desktop since floaters fill more of the viewport */
  .hero::before {
    background: rgba(0, 0, 0, 0.1);
  }

  /* Section floaters — consistent opacity across all phone sizes */
  .industry__floater--top-right,
  .systems__floater--top-left,
  .heading__floater--top-right-big,
  .heading__floater--bottom-left-upward,
  .framework__floater--bottom-right-big,
  .who__floater--bottom-left,
  .partners__floater--bottom-right,
  .cta__floater--top-right {
    opacity: 0.8;
  }
}

/* Small phones ≤375px: slightly more contained margins */
@media (max-width: 375px) {
  .hero__floater--bottom-left {
    margin-bottom: 8vh;
  }

  .hero__floater--top-right {
    margin-top: -4vh;
  }
}

/* Minimum supported width ≤320px: most contained */
@media (max-width: 320px) {

  .hero__floater--bottom-left,
  .hero__floater--top-right {
    opacity: 0.6;
  }
}



/* iPad and larger tablets (768px and below) */
@media (max-width: 768px) {
  .hero {
    text-align: center;
    padding: 60px 0 0;
    min-height: 79vh;
  }

  /* Tablet floaters - contained within hero's overflow:hidden */
  .hero__floater--bottom-left {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 15vh;
    left: 0;
    opacity: 0.8;
  }

  .hero__floater--top-right {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-top: -4vh;
    right: 0;
    opacity: 0.9;
  }

  /* Full-width stats carousel for iPad and tablets */
  .stats {
    /* width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important; */
  }

  .stats .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ================= */


.industry {
  position: relative;
  padding: 140px 0 100px;
  background: #000;
  color: #fffeff;
  overflow: visible;
}

.industry .container {
  position: relative;
  z-index: 2;
}

/* Industry section floater - TOP RIGHT upward-facing */
.industry__floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.industry__floater--top-right {
  top: 20px;
  right: 0;
  width: 280px;
  opacity: 1;
}

/* Industry floater responsive scaling */
@media (max-width: 1200px) {
  .industry__floater--top-right {
    width: 240px;
  }
}

@media (max-width: 992px) {
  .industry__floater--top-right {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .industry__floater--top-right {
    width: 160px;
    top: 10px;
  }
}

@media (max-width: 576px) {
  .industry__floater--top-right {
    width: 120px;
    top: 5px;
    opacity: 0.8 !important;
  }
}

/* Issue 3.3: Base subtitle font-size changed from 9px to 12px.
   The 9px value was a PSD export artifact — below WCAG AA minimum (14px normal, 11px bold).
   The previous fix required 14 !important overrides across two @media blocks at the bottom
   of this file just to undo it. Those blocks are now removed. A single 576px override
   handles the only remaining reduction needed. */
.industry__subtitle {
  font-size: 12px;
  color: #9b9a9b;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

/* Issue 3.3: mobile subtitle sizing at 768px removed — no longer needed
   now that base is 12px. Single 576px override at end of file handles reduction. */

.industry__title {
  font-size: 60px;
  /* updated as per PSD design */
  font-weight: 500;
  /* updated as per PSD design */
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.industry__title-accent {
  color: #00acb5;
  /* updated as per PSD design */
  font-style: italic;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.industry__desc {
  margin-top: 20px;
  color: #9b9a9b;
  /* Issue 3.2: clamp() replaces fixed 25.5px — smoothly scales 16px→25.5px
     across 576px→1160px, eliminating the abrupt jump at 576px breakpoint */
  font-size: clamp(16px, 2.2vw, 25.5px);
}

.industry__card {
  position: relative;
  padding: 30px 15px 15px 30px;
  height: 100%;
  /* min-height: 320px; */
  background: transparent;
  z-index: 2;
  max-width: 350px;
  margin: auto 0px;
}

.industry__card svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.industry__card svg path {
  fill: #000;
  stroke: #333;
  stroke-width: 3;
  transition: fill 0.4s ease, stroke 0.4s ease;
}

.industry__card-icon img {
  /* Issue 3.1: clamp() prevents 180px icon from dominating at 320px screen width.
     At 320px card (~270px usable): 40% = 108px, within the 100–160px range. */
  width: clamp(100px, 40%, 180px);
  margin: 75px auto;
  display: block;
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.industry__card-text {
  color: #9b9a9b;
  font-size: 22.5px;
  margin-top: 20px;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  /* text-align: center; */
}

.industry__card-number {
  color: #9b9a9b;
  font-size: 26px;
}

.industry__card:hover svg path {
  fill: #00acb5;
  stroke: #00acb5;
}

.industry__card:hover {
  transform: translateY(-10px);
}

.industry__card:hover .industry__card-text,
.industry__card:hover .industry__card-number {
  color: #000;
}

.industry__card:hover .industry__card-icon img {
  animation: none;
  transform: scale(1.1) translateY(-8px);
  filter: brightness(0) invert(1);
}

.industry__card,
.industry__card img {
  transition: all 0.4s ease;
}

@media (max-width: 992px) {
  .industry__title {
    font-size: 36px;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }

  .industry__title-accent {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }
}

@media (max-width: 576px) {
  .industry {
    padding: 80px 0 50px;
    text-align: center;
  }

  /* Hide <br> tags on mobile to prevent awkward line breaks */
  .industry__title br {
    display: none;
  }

  .industry__title {
    font-size: 26px;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    white-space: normal;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  .industry__title-accent {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    white-space: normal;
    display: inline;
  }

  /* industry__desc font-size removed — clamp() floor of 16px handles this (Issue 3.2) */

  .industry__card {
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================== */


.heading {
  position: relative;
  padding: 100px 0;
  background: #000;
  color: #fffeff;
  overflow: visible;
}

/* Heading section floater */
.heading__floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Floater at top-right (between systems and heading) */
.heading__floater--top-right-big {
  top: -150px;
  right: 0;
  width: 340px;
  opacity: 1;
}

/* Floater at bottom-left (between heading and framework) - upward-facing */
.heading__floater--bottom-left-upward {
  bottom: -80px;
  left: 0;
  width: 260px;
  opacity: 1;
}

/* Floater at bottom-right (between heading and framework) */
.heading__floater--bottom-right {
  bottom: -80px;
  right: 0;
  width: 260px;
  opacity: 1;
}

/* Heading floaters responsive scaling */
@media (max-width: 1200px) {
  .heading__floater--top-right-big {
    width: 300px;
  }

  .heading__floater--bottom-left-upward,
  .heading__floater--bottom-right {
    width: 230px;
  }
}

@media (max-width: 992px) {
  .heading__floater--top-right-big {
    width: 260px;
    top: -120px;
  }

  .heading__floater--bottom-left-upward,
  .heading__floater--bottom-right {
    width: 200px;
    bottom: -60px;
  }
}

@media (max-width: 768px) {
  .heading__floater--top-right-big {
    width: 220px;
    top: -100px;
  }

  .heading__floater--bottom-left-upward,
  .heading__floater--bottom-right {
    width: 170px;
    bottom: -50px;
  }
}

@media (max-width: 576px) {
  .heading__floater--top-right-big {
    width: 180px;
    top: -80px;
    opacity: 0.8 !important;
  }

  .heading__floater--bottom-left-upward,
  .heading__floater--bottom-right {
    width: 140px;
    bottom: -40px;
    opacity: 0.8 !important;
  }
}

.heading .container {
  position: relative;
  z-index: 2;
}

/* Issue 3.3: 9px → 12px base (same fix as industry__subtitle above) */
.heading__subtitle {
  font-size: 12px;
  color: #9b9a9b;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.heading__title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  max-width: 800px;
}

.heading__title-accent {
  color: #00acb5;
  /* updated as per PSD design */
  font-style: italic;
}

.heading__desc {
  margin-top: 20px;
  color: #9b9a9b;
  /* Issue 3.2: clamp() */
  font-size: clamp(16px, 2.2vw, 25.5px);
}

.heading__card {
  position: relative;
  padding: 30px 15px 15px 30px;
  height: 100%;
  background: transparent;
  z-index: 2;
  max-width: 350px;
  margin: auto 0px;
}

.heading__card svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.heading__card svg path {
  fill: #000;
  stroke: #333;
  stroke-width: 3;
  transition: fill 0.4s ease, stroke 0.4s ease;
}

.heading__card-icon img {
  /* Issue 3.1: clamp() matches industry card icon fix */
  width: clamp(100px, 40%, 180px);
  margin: 75px auto;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(61%) sepia(61%) saturate(500%) hue-rotate(140deg);
  animation: breathe 3s ease-in-out infinite;
}

.heading__card-text {
  color: #9b9a9b;
  font-size: 22.5px;
  margin-top: 20px;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  /* text-align: center; */
}

.heading__card-number {
  color: #9b9a9b;
  font-size: 26px;
}

.heading__card:hover svg path {
  fill: #00acb5;
  stroke: #00acb5;
}

.heading__card:hover {
  transform: translateY(-10px);
}

.heading__card:hover .heading__card-text,
.heading__card:hover .heading__card-number {
  color: #000;
}

.heading__card:hover .heading__card-icon img {
  animation: none;
  transform: scale(1.1) translateY(-8px);
  filter: brightness(0) invert(1);
}

.heading__card,
.heading__card img {
  transition: all 0.4s ease;
}

@media (max-width: 992px) {
  .heading__title {
    font-size: 36px;
  }
}

@media (max-width: 576px) {
  .heading {
    padding: 60px 0;
    text-align: center;
  }

  .heading__title {
    font-size: 26px;
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .heading__title-accent {
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* heading__desc font-size removed — clamp() floor of 16px handles this (Issue 3.2) */

  .heading__card {
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
  }
}



/* =========================== */


.systems {
  position: relative;
  padding: 80px 0 100px;
  background: #000;
  color: #fffeff;
  overflow: visible;
}

/* Systems section floaters */
.systems__floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Floater at top-left (between industry and systems) */
.systems__floater--top-left {
  top: -100px;
  left: 0;
  width: 280px;
  opacity: 1;
  z-index: 0;
  filter: brightness(1.3) contrast(1.2);
}

/* Floater at bottom-left (between systems and heading) */
.systems__floater--bottom-left-big {
  bottom: -150px;
  left: 0;
  width: 320px;
  opacity: 1;
}

/* Systems floaters responsive scaling */
@media (max-width: 1200px) {
  .systems__floater--top-left {
    width: 240px;
  }

  .systems__floater--bottom-left-big {
    width: 280px;
  }
}

@media (max-width: 992px) {
  .systems__floater--top-left {
    width: 200px;
    top: -80px;
  }

  .systems__floater--bottom-left-big {
    width: 240px;
    bottom: -120px;
  }
}

@media (max-width: 768px) {
  .systems__floater--top-left {
    width: 160px;
    top: -60px;
  }

  .systems__floater--bottom-left-big {
    width: 200px;
    bottom: -100px;
  }
}

@media (max-width: 576px) {
  .systems__floater--top-left {
    width: 120px;
    top: -40px;
    opacity: 0.8 !important;
  }

  .systems__floater--bottom-left-big {
    width: 160px;
    bottom: -80px;
    opacity: 0.8 !important;
  }
}

.systems .container {
  position: relative;
  z-index: 2;
}

/* Issue 3.3: 9px → 12px base */
.systems__subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  color: #9b9a9b;
  margin-bottom: 20px;
}

.systems__title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.systems__title-accent {
  color: #00acb5;
  /* updated as per PSD design */
  font-style: italic;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.systems__desc {
  margin-top: 20px;
  color: #9b9a9b;
  /* Issue 3.2: clamp() */
  font-size: clamp(16px, 2.2vw, 25.5px);
  /* max-width: 700px; */
}

.systems__list {
  margin-top: 60px;
}

.systems__item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  transition: 0.3s;
}

.systems__item img {
  width: 55px;
  filter: brightness(0) saturate(100%) invert(61%) sepia(61%) saturate(500%) hue-rotate(140deg);
  transition: 0.3s;
}

.systems__item-text {
  /* Issue 3.2: clamp() — 18px floor, 30px cap */
  font-size: clamp(18px, 2.6vw, 30px);
  font-style: italic;
  color: #fffeff;
  margin: 0;
}

.systems__item:hover {
  transform: translateX(10px);
}

.systems__item:hover img {
  transform: scale(1.1);
}

@media (max-width: 992px) {
  .systems__title {
    font-size: 36px;
  }

  /* systems__item-text font-size removed — clamp() handles (Issue 3.2) */
}

@media (max-width: 576px) {
  .systems {
    padding: 70px 0;
    text-align: center;
  }

  .systems__title {
    font-size: 26px;
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .systems__title-accent {
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* systems__desc and systems__item-text font-size overrides removed — clamp() handles (Issue 3.2) */

  .systems__item {
    flex-direction: column;
    text-align: center;
  }

  .systems__item img {
    width: 40px;
  }

  .systems__item-text {
    font-size: 18px;
  }

  .systems__floater--left-big {
    width: 180px;
    opacity: 0.40;
  }
}

/* =========================== */


.framework {
  position: relative;
  padding: 80px 0;
  /* Reduced from 100px to match other sections */
  color: #fffeff;
  overflow: visible;
}

/* Framework section floater */
.framework__floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Floater at top-left (between heading and framework) */
.framework__floater--top-left {
  top: -80px;
  left: 0;
  width: 260px;
  opacity: 1;
}

/* Floater at bottom-right (continuing to next section) */
.framework__floater--bottom-right-big {
  bottom: -150px;
  right: 0;
  width: 320px;
  opacity: 1;
}

/* Floater at top-right (between heading and framework) */
.framework__floater--top-right {
  top: -80px;
  right: 0;
  width: 260px;
  opacity: 1;
}

/* Framework floaters responsive scaling */
@media (max-width: 1200px) {

  .framework__floater--top-left,
  .framework__floater--top-right {
    width: 230px;
  }

  .framework__floater--bottom-right-big {
    width: 280px;
  }
}

@media (max-width: 992px) {

  .framework__floater--top-left,
  .framework__floater--top-right {
    width: 200px;
    top: -60px;
  }

  .framework__floater--bottom-right-big {
    width: 240px;
    bottom: -120px;
  }
}

@media (max-width: 768px) {

  .framework__floater--top-left,
  .framework__floater--top-right {
    width: 160px;
    top: -50px;
  }

  .framework__floater--bottom-right-big {
    width: 200px;
    bottom: -100px;
  }
}

@media (max-width: 576px) {

  .framework__floater--top-left,
  .framework__floater--top-right {
    width: 120px;
    top: -40px;
    opacity: 0.8 !important;
  }

  .framework__floater--bottom-right-big {
    width: 160px;
    bottom: -80px;
    opacity: 0.8 !important;
  }
}

.framework .container {
  position: relative;
  z-index: 2;
}


/* Issue 3.3: 9px → 12px base */
.framework__subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  color: #9b9a9b;
  margin-bottom: 20px;
}

.framework__title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.framework__title-accent {
  color: #00acb5;
  /* updated as per PSD design */
  font-style: italic;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.framework__desc {
  margin-top: 20px;
  color: #9b9a9b;
  /* Issue 3.2: clamp() */
  font-size: clamp(16px, 2.2vw, 25.5px);
  max-width: 850px;
}


.framework__cards {
  margin-top: 50px;
  /* Reduced from 60px to align with overall design */
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Reduced gap between cards */
  width: 100%;
  /* Ensure full width */
}


.framework__card svg {
  position: absolute;
  top: 0px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  /* min-height: 145px; Ensure consistent minimum height across all cards */
  display: block;
  pointer-events: none;
  z-index: -1;
}

.framework__card svg path {
  fill: #000;
  stroke: #333;
  stroke-width: 3;
  transition: fill 0.4s ease, stroke 0.4s ease;
}

.framework__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  /* Align items to top */
  gap: 20px;
  padding: 20px 35px 20px 20px;
  background: transparent;
  transition: 0.4s ease;
  margin-bottom: 25px;
  /* Reduced margin between cards */
  max-width: 830px;
  width: 100%;
  /* Ensure card takes full available width up to max-width */
  height: auto;
  /* Allow cards to expand based on content */
  box-sizing: border-box;
  /* Include padding in width calculation */
}

.framework__card:hover svg path {
  fill: #00acb5;
  stroke: #00acb5;
}

.framework__card-icon {
  flex-shrink: 0;
  padding-top: 2px;
  /* Reduced top padding for tighter alignment */
}

.framework__card-icon img {
  width: 60px;
  /* Slightly larger icon */
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(61%) sepia(61%) saturate(500%) hue-rotate(140deg);
  transition: 0.3s;
}

.framework__card-content {
  flex: 1;
  min-width: 0;
  /* Issue 4.2: calc(100% - 150px) was a magic number — icon is 60px, gap is 20px.
     Using actual dimensions: 60px icon + 20px gap + 8px visual buffer = 88px.
     This prevents text overflow on the right without the unnecessary 62px of dead space
     that the previous 150px constant was wasting, especially visible at 430px–576px. */
  max-width: calc(100% - 88px);
  padding-top: 2px;
}

.framework__card-content h4 {
  font-size: 25.5px;
  margin-bottom: 5px;
  /* Reduced spacing between title and text */
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.3;
  /* Added line-height for better text flow */
  transition: all 0.4s ease;
  /* Smooth transition for hover effects */
}

.framework__card-title {
  transition: all 0.4s ease;
  /* Ensure smooth transition on hover */
}

.framework__card:hover .framework__card-title {
  margin-bottom: 5px;
  /* Keep same spacing on hover */
}

.framework__card-content p {
  color: #9b9a9b;
  font-size: 22.5px;
  /* Correct font size for description text */
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  /* Added line-height for better text flow */
  transition: all 0.4s ease;
  /* Smooth transition for hover effects */
}

/* Desktop hover state */
@media (min-width: 769px) {
  .framework__card:hover {
    transform: translateX(10px);
    padding: 20px 35px 30px 20px;
  }
}

/* Mobile hover state */
@media (max-width: 768px) {
  .framework__card:hover {
    transform: translateX(5px);
    /* Keep same padding to prevent height change */
  }
}

/* iPhone 14 Pro Max hover state */
@media (max-width: 430px) {
  .framework__card:hover {
    transform: translateX(3px);
    /* Keep same padding to prevent height change */
  }
}

.framework__card:hover .framework__card-title,
.framework__card:hover .framework__card-text {
  color: #000;
  /* Only change color on hover, keep font sizes same */
  /* Title remains 25.5px, Text remains 22.5px */
}

.framework__card:hover .framework__card-icon img {
  filter: brightness(0);
  transform: scale(1.1);
}


@media (max-width: 992px) {
  .framework__title {
    font-size: 36px;
  }

  .framework__card {
    max-width: 100%;
    /* Allow full width on tablets */
  }
}

@media (max-width: 768px) {
  .framework__card {
    padding: 20px 40px 25px 20px;
    /* Reduced bottom padding for tablets */
  }

  .framework__card-content h4 {
    font-size: 22px;
  }

  .framework__card-content p {
    font-size: 18px;
  }
}

/* iPhone 14 Pro Max and similar large phones (430px and smaller) */
@media (max-width: 430px) {
  .framework__card {
    padding: 20px 35px 15px 20px;
  }

  .framework__card-icon {
    margin-bottom: 10px;
  }

  .framework__card-icon img {
    width: 45px;
  }

  /* Issue 4.2: Reset max-width at 430px — at this size the card switches to
     grid layout (two-column icon + content), so the flex-based calc is irrelevant
     and would clip content unnecessarily. */
  .framework__card-content {
    max-width: 100%;
  }

  .framework__card-content h4 {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .framework__card-content p {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (max-width: 576px) {
  .framework {
    padding: 70px 0;
    text-align: center;
  }

  .framework__title {
    font-size: 26px;
    hyphens: none;
  }

  .framework__title-accent {
    hyphens: none;
  }

  /* framework__desc font-size removed — clamp() handles (Issue 3.2) */

  /* Override Bootstrap column padding on mobile */
  .framework .row {
    margin: 0;
  }

  .framework__cards {
    padding: 0 15px;
    /* Add horizontal padding on mobile */
  }

  .framework__card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon title"
      "icon text";
    align-items: start;
    gap: 10px 14px;
    text-align: left;
    padding: 20px 45px 15px 20px;
    /* Reduced bottom padding for small mobile */
    max-width: 100%;
    /* Full width on mobile */
    width: 100%;
    /* Ensure full width */
    /* min-height: 145px; Maintain consistent minimum height */
  }

  .framework__card-icon {
    grid-area: icon;
    align-self: start;
    padding-top: 0;
  }

  .framework__card-icon img {
    width: 45px;
    /* Optimized icon size for small phones */
    margin: 0;
  }

  .framework__card-content {
    grid-area: title / title-end / text-end;
    max-width: 100%;
    padding-top: 0;
  }

  .framework__card-content h4 {
    grid-area: title;
    font-size: 16px;
    /* Slightly reduced for better fit */
    margin-bottom: 5px;
    line-height: 1.3;
  }

  .framework__card-content p {
    grid-area: text;
    font-size: 13px;
    /* Keep readable size */
    line-height: 1.5;
    margin: 0;
  }

  .framework__float--left,
  .framework__float--right {
    width: 150px;
    opacity: 0.05;
  }
}

/* ================== */

/* FOOTER */
.footer {
  position: relative;
  color: #fffeff;
  padding: 100px 0 60px;
  overflow: hidden;
  border-top: 3px solid #222222;
  width: 100%;
  max-width: 100%;
}

.footer__float {
  position: absolute;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.footer__float--left {
  left: 0;
  bottom: 0;
  width: 300px;
  animation: tlFloatUp 6s ease-in-out infinite;
}

.footer__float--right {
  right: 0;
  top: 0;
  width: 300px;
  animation: tlFloatDown 6s ease-in-out infinite;
}

/* Footer - subtle */
.footer__float--subtle {
  opacity: 0.09;
  width: 240px;
}

@keyframes tlFloatUp {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes tlFloatDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(0);
  }
}

.footer .container {
  position: relative;
  z-index: 2;
}

.footer__logo img {
  width: 180px;
}

.footer__desc {
  margin-top: 20px;
  color: #b4b9c0;
  max-width: 500px;
  line-height: 1.6;
}

.footer__copy {
  margin-top: 30px;
  color: #b4b9c0;
  font-size: 14px;
  max-width: 100%;
  width: auto;
}

.footer__col-title {
  font-size: 14px;
  letter-spacing: 2px;
  color: #00acb5;
  /* updated as per PSD design */
  margin-bottom: 20px;
}

.footer__col-text {
  color: #b4b9c0;
  margin-bottom: 10px;
}

.footer__col-text a {
  color: #b4b9c0;
  text-decoration: none;
  transition: 0.3s;
}

.footer__col-text a:hover {
  color: #00acb5;
  /* updated as per PSD design */
}


@media (max-width: 992px) {
  .footer {
    padding: 70px 0 40px;
  }
}

@media (max-width: 576px) {

  .footer {
    text-align: center;
  }

  .footer__row {
    flex-direction: column;
    gap: 40px;
  }

  .footer__desc {
    margin: 20px auto;
  }

  .footer__col {
    margin-bottom: 20px;
  }

  .footer__float--left,
  .footer__float--right {
    width: 150px;
    opacity: 0.04;
  }
}

/* =========================== */

.who {
  position: relative;
  padding: 100px 0;
  color: #fffeff;
  overflow: visible;
}

/* Who section floater */
.who__floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Floater at top-right (between framework and who) */
.who__floater--top-right-big {
  top: -100px;
  right: 0;
  width: 300px;
  opacity: 1;
}

.who__floater--bottom-left {
  bottom: -100px;
  left: 0;
  width: 280px;
  opacity: 1;
}

/* Who floaters responsive scaling */
@media (max-width: 1200px) {
  .who__floater--top-right-big {
    width: 260px;
  }

  .who__floater--bottom-left {
    width: 240px;
  }
}

@media (max-width: 992px) {
  .who__floater--top-right-big {
    width: 220px;
    top: -80px;
  }

  .who__floater--bottom-left {
    width: 200px;
    bottom: -80px;
  }
}

@media (max-width: 768px) {
  .who__floater--top-right-big {
    width: 180px;
    top: -60px;
  }

  .who__floater--bottom-left {
    width: 160px;
    bottom: -60px;
  }
}

@media (max-width: 576px) {
  .who__floater--top-right-big {
    width: 140px;
    top: -40px;
    opacity: 0.8 !important;
  }

  .who__floater--bottom-left {
    width: 120px;
    bottom: -40px;
    opacity: 0.8 !important;
  }
}

.who .container {
  position: relative;
  z-index: 2;
}

/* TEXT */
/* Issue 3.3: 9px → 12px base */
.who__subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  color: #9b9a9b;
  margin-bottom: 20px;
}

.who__title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.who__title>span,
.who__title>em {
  display: inline-block;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.who__title-highlight {
  color: #00acb5;
  /* updated as per PSD design */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.who__title-emphasis {
  color: #00acb5;
  /* updated as per PSD design */
  font-style: italic;
  display: block;
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Animation wrapper classes - ensure visibility as fallback */
.section__title-main {
  display: inline;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Word wrapper for typing animation - prevents mid-word breaks */
.typing-word {
  display: inline-block;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: nowrap;
}

.typing-char {
  display: inline-block;
  opacity: 1;
  /* Default visible, JS will set to 0 before animation */
}

.who__highlight {
  margin-top: 20px;
  /* Issue 3.2: clamp() */
  font-size: clamp(16px, 2.2vw, 25.5px);
  color: #9b9a9b;
}

.who__desc {
  margin-top: 20px;
  color: #9b9a9b;
  /* Issue 3.2: clamp() */
  font-size: clamp(16px, 2.2vw, 25.5px);
  max-width: 850px;
  line-height: 1.6;
}

.who__grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
}

.who__item-title {
  color: #00acb5;
  /* updated as per PSD design */
  font-size: 25.5px;
  margin-bottom: 15px;
}

.who__item-text {
  color: #fffeff;
  line-height: 1.6;
  font-size: 18px;
}

.who__item {
  transition: 0.3s;
}

.who__item:hover {
  transform: translateY(-8px);
}


@media (max-width: 992px) {
  .who__title {
    font-size: 36px;
  }

  .who__grid {
    grid-template-columns: 1fr 1fr;
    /* Issue 5.1: 80px gap is designed for 3-column layout. At 2-column (992px),
       it compresses each column unnecessarily. 40px gives ~360px per column
       at a 768px container vs ~320px with 80px gap. */
    gap: 40px;
  }
}

@media (max-width: 576px) {
  .who {
    padding: 70px 0;
    text-align: center;
  }

  .who__title {
    font-size: 26px;
    hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .who__title-highlight,
  .who__title-emphasis {
    hyphens: none;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* who__highlight and who__desc font-size overrides removed — clamp() handles (Issue 3.2) */

  .who__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .who__float--left,
  .who__float--right {
    width: 150px;
    opacity: 1;
  }
}

/* =========================== */

.partners {
  position: relative;
  padding: 100px 0;
  background: #000;
  color: #fffeff;
  overflow: visible;
}

/* Partners section floater */
.partners__floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Floater at top-left (between who and partners) */
.partners__floater--top-left {
  top: -100px;
  left: 0;
  width: 280px;
  opacity: 1;
}

.partners__floater--top-right {
  top: -100px;
  right: 0;
  width: 280px;
  opacity: 1;
}

.partners__floater--bottom-right {
  bottom: -100px;
  right: 0;
  width: 280px;
  opacity: 1;
}

/* Partners floaters responsive scaling */
@media (max-width: 1200px) {

  .partners__floater--top-left,
  .partners__floater--top-right,
  .partners__floater--bottom-right {
    width: 240px;
  }
}

@media (max-width: 992px) {

  .partners__floater--top-left,
  .partners__floater--top-right,
  .partners__floater--bottom-right {
    width: 200px;
    top: -80px;
  }

  .partners__floater--bottom-right {
    bottom: -80px;
  }
}

@media (max-width: 768px) {

  .partners__floater--top-left,
  .partners__floater--top-right,
  .partners__floater--bottom-right {
    width: 160px;
    top: -60px;
  }

  .partners__floater--bottom-right {
    bottom: -60px;
  }
}

@media (max-width: 576px) {

  .partners__floater--top-left,
  .partners__floater--top-right,
  .partners__floater--bottom-right {
    width: 120px;
    top: -40px;
    opacity: 0.8 !important;
  }

  .partners__floater--bottom-right {
    bottom: -40px;
  }
}

.partners .container {
  position: relative;
  z-index: 2;
}

/* Issue 3.3: 9px → 12px base */
.partners__subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  color: #9b9a9b;
  margin-bottom: 20px;
}

.partners__title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.partners__title-emphasis {
  color: #00acb5;
  /* updated as per PSD design */
  font-style: italic;
  display: block;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.partners__desc {
  margin-top: 20px;
  color: #9b9a9b;
  /* Issue 3.2: clamp() */
  font-size: clamp(16px, 2.2vw, 25.5px);
  line-height: 1.6;
}

.partners__group {
  margin-top: 60px;
}

.partners__group-title {
  margin: 40px 0 31px;
  font-size: 18px;
  color: #00acb5;
  /* updated as per PSD design */
  letter-spacing: 1px;
}

.partners__logos {
  display: flex;
  flex-wrap: wrap;
  /* Issue 5.2: gap replaces margin on individual logo items.
     With 4 logos at 768px: 4 × clamp(100px,18%,150px) + 3 × 20px gap = fits cleanly. */
  gap: 20px;
  align-items: center;
}

.partners__logos--grid {
  justify-content: center;
}

.partners__logos--mt {
  margin-top: 40px;
}

.partners__logo-item {
  /* Issue 5.2: clamp() replaces fixed 150px width.
     At 768px container (~720px usable): 18% = ~130px — prevents the 4-logo row
     overflowing at 840px (4×150 + 4×40 margin + 3×20 gap) that flex-wrap was papering over.
     margin removed in favour of gap on parent. */
  width: clamp(100px, 18%, 150px);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners__logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s;
}

.partners__logo-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

@media (max-width: 992px) {
  .partners__title {
    font-size: 36px;
  }

  .partners__logos {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .partners {
    padding: 70px 0;
    text-align: center;
  }

  .partners__title {
    font-size: 26px;
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .partners__title-emphasis {
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* Hide <br> tags on mobile to prevent awkward line breaks */
  .partners__title-emphasis br {
    display: none;
  }

  /* partners__desc font-size removed — clamp() handles (Issue 3.2) */

  .partners__logos {
    flex-direction: column;
    align-items: center;
  }

  .partners__logo-item {
    margin: 10px;
  }
}

/* ======================= */

.cta {
  position: relative;
  padding: 120px 0;
  color: #fffeff;
  overflow: visible;
}

/* CTA section floater */
.cta__floater {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Floater at top-right (between partners and cta) */
.cta__floater--top-right {
  top: -120px;
  right: 0;
  width: 300px;
  opacity: 1;
}

/* CTA floater responsive scaling */
@media (max-width: 1200px) {
  .cta__floater--top-right {
    width: 260px;
  }
}

@media (max-width: 992px) {
  .cta__floater--top-right {
    width: 220px;
    top: -100px;
  }
}

@media (max-width: 768px) {
  .cta__floater--top-right {
    width: 180px;
    top: -80px;
  }
}

@media (max-width: 576px) {
  .cta__floater--top-right {
    width: 140px;
    top: -60px;
    opacity: 0.8 !important;
  }
}


.cta .container {
  position: relative;
  z-index: 2;
}

/* Issue 3.3: 9px → 12px base */
.cta__subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  color: #9b9a9b;
  margin-bottom: 20px;
}

.cta__title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
}

.cta__title-accent {
  color: #00acb5;
  /* updated as per PSD design */
  font-style: italic;
}

.cta__desc {
  margin-top: 30px;
  /* Issue 3.2: clamp() */
  font-size: clamp(16px, 2.2vw, 25.5px);
  color: #9b9a9b;
  max-width: 750px;
  line-height: 1.6;
}

.cta__note {
  margin-top: 20px;
  color: #9b9a9b;
  /* Issue 3.2: clamp() */
  font-size: clamp(14px, 2.2vw, 25.5px);
}

.cta__btn {
  display: inline-block;
  margin-top: 40px;
  padding: 14px 40px;
  border: 2px solid #fffeff;
  border-radius: 40px;
  color: #fffeff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  transition: 0.3s ease;
}

.cta__btn:hover {
  background: #00acb5;
  border-color: #00acb5;
  /* updated as per PSD design */
  color: #000;
}


@media (max-width: 992px) {
  .cta__title {
    font-size: 36px;
  }

  /* cta__desc font-size removed — clamp() handles (Issue 3.2) */
}

@media (max-width: 576px) {
  .cta {
    padding: 80px 0;
    text-align: center;
  }

  .cta__title {
    font-size: 26px;
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .cta__title-accent {
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* cta__desc and cta__note font-size overrides removed — clamp() handles (Issue 3.2) */

  .cta__btn {
    padding: 12px 25px;
  }

  .cta__float--left,
  .cta__float--right {
    width: 150px;
    opacity: 0.05;
  }
}

/* ==========================================
   MOBILE BREATHING SPACE - 30px PADDING
   Applied to all sections except stats
   ========================================== */

@media (max-width: 576px) {

  .industry .container,
  .systems .container,
  .heading .container,
  .framework .container,
  .who .container,
  .partners .container,
  .cta .container,
  .footer .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ==========================================
   SECTION OVERFLOW - ALLOW FLOATERS TO BLEED
   Floaters are intentional design elements that
   overflow between sections. We keep overflow: visible
   to preserve this design on all screen sizes.
   Horizontal overflow is managed by the body's
   overflow-x: hidden property.
   ========================================== */

@media (max-width: 768px) {

  .industry,
  .systems,
  .heading,
  .framework,
  .who,
  .partners,
  .cta {
    overflow: visible;
    /* Allow floaters to overflow as designed */
  }
}

@media (max-width: 576px) {
  .typing-word {
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .typing-char {
    word-break: keep-all;
  }

  .section__title-main {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .industry,
  .systems,
  .heading,
  .framework,
  .who,
  .partners,
  .cta {
    overflow: visible;
    /* Allow floaters to overflow as designed */
  }
}

/* ==========================================
   MOBILE SUBTITLE SIZING
   Issue 3.3: The two !important override blocks that previously compensated for
   the 9px base font-size have been removed. Base is now 12px.
   A single, no-!important override handles the 576px reduction.
   ========================================== */

@media (max-width: 576px) {

  .industry__subtitle,
  .systems__subtitle,
  .heading__subtitle,
  .framework__subtitle,
  .who__subtitle,
  .partners__subtitle,
  .cta__subtitle {
    font-size: 11px;
    letter-spacing: 1px;
  }
}

/* ==========================================
   CARD HOVER FIX v4 — Solid Teal Card with Bright Content

   Uses filter:brightness() instead of opacity to avoid GSAP conflict.
   GSAP scroll animations set inline opacity:1 on card content elements,
   which would override any CSS opacity rules.

   filter:brightness() is not used by GSAP, so no conflict.
   ========================================== */

/* ─── BASE: Slightly dimmed card content (brightness 0.85 ≈ opacity 0.8) ─── */

.industry__card-text,
.industry__card-number,
.heading__card-text,
.heading__card-number,
.framework__card-title,
.framework__card-text {
  filter: brightness(0.85);
  transition: filter 0.4s ease, color 0.4s ease;
}

/* ─── INDUSTRY CARDS ─── */

/* Hover: solid teal fill (restores Image 1 look) */
.industry__card:hover svg path {
  fill: #00acb5;
  stroke: #00acb5;
}

/* Text goes to full brightness white on teal background */
.industry__card:hover .industry__card-text {
  color: #fffeff;
  filter: brightness(1);
}

/* Number goes to full brightness white on teal background */
.industry__card:hover .industry__card-number {
  color: #fffeff;
  filter: brightness(1);
}

/* Icon stays WHITE (inverted) on teal background */
.industry__card:hover .industry__card-icon img {
  animation: none;
  transform: scale(1.1) translateY(-8px);
  filter: brightness(0) invert(1);
}

/* ─── HEADING CARDS ─── */

/* Hover: solid teal fill */
.heading__card:hover svg path {
  fill: #00acb5;
  stroke: #00acb5;
}

/* Text goes to full brightness white on teal */
.heading__card:hover .heading__card-text {
  color: #000;
  filter: brightness(1);
}

/* Number goes to full brightness white on teal */
.heading__card:hover .heading__card-number {
  color: #000;
  filter: brightness(1);
}

/* Icon stays WHITE (inverted) on teal */
.heading__card:hover .heading__card-icon img {
  animation: none;
  transform: scale(1.1) translateY(-8px);
  filter: brightness(0) invert(1);
}

/* ─── FRAMEWORK CARDS ─── */

/* Hover: solid teal fill */
.framework__card:hover svg path {
  fill: #00acb5;
  stroke: #00acb5;
}

/* Title goes to full brightness white on teal */
.framework__card:hover .framework__card-title {
  color: #000;
  filter: brightness(1);
}

/* Description goes to full brightness light gray on teal */
.framework__card:hover .framework__card-text {
  color: #000;
  filter: brightness(1);
}

/* Icon stays WHITE (inverted) on teal */
.framework__card:hover .framework__card-icon img {
  filter: brightness(0) invert(1);
  transform: scale(1.1);
}

/* ==========================================
   END CARD HOVER FIX v4
   ========================================== */