/* ===========================================================================
   Pixous Technologies — Global Stylesheet
   Mobile-First Architecture supporting:
   - Mobile (< 576px)
   - Tablets (576px - 768px)
   - Laptops (768px - 1024px)
   - Desktops (> 1024px) & Extra-Large (> 1280px)
   =========================================================================== */

/* ---------------------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-primary-start: #0A1B2E;
  --color-primary-end: #173A5E;
  --color-secondary-start: #07928D;
  --color-secondary-end: #131313;
  --color-accent: #09C6A7;
  --color-accent-dark: #078C74;

  /* CTA amber */
  --color-cta: #F5A623;
  --color-cta-dark: #D98E12;

  /* Neutrals */
  --color-surface-muted: #EFEFEF;
  --color-surface-tint: #F8FBFE;
  --color-page-tint: #F5F6F8;
  --color-white: #FFFFFF;
  --color-text: #131313;
  --color-text-muted: #5B6B76;
  --color-border: #E1E7EA;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-end));
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-start), var(--color-secondary-end));

  /* Typography */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Layout */
  --container-max: 1440px;
  --container-padding: clamp(1rem, 3.5vw, 2.5rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(1, 34, 69, 0.08);
  --shadow-md: 0 8px 24px rgba(1, 34, 69, 0.12);
  --shadow-lg: 0 16px 48px rgba(1, 34, 69, 0.16);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  --header-height: 64px;
}

@media (min-width: 1024px) {
  :root {
    --header-height: 104px;
  }
}

/* ---------------------------------------------------------------------
   2. Reset & Base (Mobile-First)
   --------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Mobile overscroll (pull past the top/bottom) reveals whatever sits
     behind <body> — that's <html>'s own background, not body's. Left
     unset it defaults to transparent, so some mobile browsers/WebViews
     fall back to a dark placeholder color there instead of white,
     flashing during the bounce-back. Matching body's background here
     closes that gap. */
  background: var(--color-white);
  /* body already has overflow-x:hidden, but that alone doesn't stop
     mobile Chrome from widening its *layout viewport* to fit an
     off-screen fixed element's painted box (e.g. the nav drawer sitting
     just past the right edge) — the page then renders zoomed out to fit
     everything, with dead space around it. overflow-x:hidden on <html>
     itself (the actual scrolling element) is what caps the viewport at
     device-width regardless of what any descendant's box extends to. */
  overflow-x: hidden;
  max-width: 100vw;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[id], section[id], .industry-card[id], .discipline-panel[id] {
  scroll-margin-top: calc(var(--header-height, 70px) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  font-size: 1rem;
  overflow-x: hidden;
  width: 100%;
  min-width: 320px;
}

body.nav-open {
  /* position:fixed (paired with the saved-scroll-offset dance in
     initMobileNav's openNav/closeNav) is what actually stops iOS Safari
     from scrolling the page underneath the open drawer — overflow:hidden
     alone doesn't reliably do it there, which is what produced the
     "content floating detached behind the menu" glitch. */
  position: fixed;
  overflow: hidden;
  touch-action: none;
  width: 100%;
}

/* Flexible images & media — prevent overflow */
img, svg, video, canvas, iframe, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* Focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 0;
  top: -70px;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 12px 20px;
  z-index: 2000;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top var(--transition-fast);
  font-weight: var(--fw-semibold);
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   3. Layout / Container
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

main {
  display: block;
  width: 100%;
}

section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  width: 100%;
  position: relative;
}

/* ---------------------------------------------------------------------
   4. Fluid Responsive Typography
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, a, li, span {
  overflow-wrap: break-word;
  word-break: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: 1.22;
  color: var(--color-text);
}

h1 { font-size: clamp(1.85rem, 4.5vw, 3rem); font-weight: var(--fw-bold); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.35rem); font-weight: var(--fw-bold); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { font-size: clamp(1rem, 1.4vw, 1.15rem); }
p { color: var(--color-text-muted); font-size: clamp(0.92rem, 1.1vw, 1rem); }

/* ---------------------------------------------------------------------
   5. Touch-Friendly Buttons (Min 44x44px target)
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.65rem;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
  line-height: 1;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.btn--outline:hover, .btn--outline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

.btn--outline-dark {
  background: #FFFFFF;
  color: var(--color-primary-end);
  border: 1.5px solid var(--color-border);
}
.btn--outline-dark:hover, .btn--outline-dark:focus-visible {
  background: #F8FAFC;
  border-color: var(--color-primary-end);
  color: var(--color-primary-end);
}

.btn--cta {
  background: var(--color-cta);
  color: var(--color-primary-end);
  border: 1.5px solid transparent;
}
.btn--cta:hover, .btn--cta:focus-visible {
  background: var(--color-cta-dark);
  transform: translateY(-1px);
}

.btn--sm {
  padding: 0.55rem 1.15rem;
  font-size: 0.85rem;
  min-height: 44px;
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

@media (min-width: 576px) {
  .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
  }
}

.btn-row--center {
  justify-content: center;
}

/* ---------------------------------------------------------------------
   6. Cards & Atoms
   --------------------------------------------------------------------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.icon-tile {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.icon-tile .icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.icon-tile--blue { background: #E3EEFD; color: #2563EB; }
.icon-tile--orange { background: #FDECD9; color: #D9720C; }
.icon-tile--purple { background: #ECE5FB; color: #6D28D9; }
.icon-tile--green { background: #E1F6EA; color: #15803D; }
.icon-tile--pink { background: #FCE4EC; color: #DB2777; }
.icon-tile--teal { background: #DFF6F3; color: var(--color-accent-dark); }
.icon-tile--navy { background: var(--color-primary-end); color: var(--color-white); }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.checklist {
  display: grid;
  gap: 0.85rem;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--color-text);
  font-weight: var(--fw-medium);
  font-size: 0.95rem;
}
.checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.testimonial-card__stars {
  color: #F5A623;
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}
.testimonial-card__stars .icon { width: 16px; height: 16px; }
.testimonial-card__quote { color: var(--color-text); margin-bottom: 1rem; font-size: 0.95rem; }
.testimonial-card__person { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-card__avatar { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; object-fit: cover; background: var(--color-surface-muted); }
.testimonial-card__name { font-weight: var(--fw-semibold); color: var(--color-text); font-size: 0.95rem; }
.testimonial-card__role { font-size: 0.82rem; color: var(--color-text-muted); }

.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  cursor: pointer;
}
.faq-item__question .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}
.faq-item[data-open="true"] .faq-item__question .icon {
  transform: rotate(45deg);
}
.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base) ease;
}
.faq-item[data-open="true"] .faq-item__answer {
  max-height: 500px;
}
.faq-item__answer p {
  padding-bottom: 1.1rem;
}

/* ---------------------------------------------------------------------
   7. Section Heading
   --------------------------------------------------------------------- */
.section-heading {
  max-width: 720px;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}
.section-heading__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-dark);
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Eyebrow Minimal Glowing Dot */
.eyebrow-dot,
.badge-dot,
.about-hero__badge-dot {
  display: inline-block;
  width: 5.5px;
  height: 5.5px;
  min-width: 5.5px;
  min-height: 5.5px;
  border-radius: 50%;
  background: #00B4A0;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin-right: 0.35rem;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 0 3px rgba(0, 180, 160, 0.45);
  animation: dot-pulse-subtle 3s ease-in-out infinite;
}

@keyframes dot-pulse-subtle {
  0%, 100% {
    opacity: 0.85;
    box-shadow: 0 0 2.5px rgba(0, 180, 160, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 5px 1px rgba(0, 180, 160, 0.55);
  }
}

.section-heading__title {
  color: var(--color-text);
}
.section-heading__text {
  margin-top: 0.85rem;
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
}
.section-heading--light .section-heading__title,
.section-heading--light .section-heading__text {
  color: var(--color-white);
}
.section-heading--light .section-heading__eyebrow {
  color: var(--color-accent);
}
.section-heading--light .eyebrow-dot {
  background: #38BDF8;
  box-shadow: 0 0 3.5px rgba(56, 189, 248, 0.5);
}
.section-heading--left {
  text-align: left;
  margin-inline: 0 auto;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
  max-width: 820px;
}

/* "Seven disciplines. One operations platform." wraps to two lines
   under the shared component's 720px cap. Widening it here only
   affects this section's heading — on narrow viewports the parent
   .container is already narrower than this max-width, so mobile still
   wraps naturally; this only changes wide-viewport behavior. */
.platform .section-heading {
  max-width: 1000px;
}

/* ---------------------------------------------------------------------
   8. Hero Band / Breadcrumbs
   --------------------------------------------------------------------- */
.hero-band {
  background: radial-gradient(ellipse at 85% 0%, #152C48 0%, #091527 75%);
  color: var(--color-white);
  text-align: left;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.8rem, 3.5vw, 2.75rem);
}
.hero-band h1 {
  color: var(--color-white);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.breadcrumb ol {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: #7E8E9F;
  flex-wrap: wrap;
}
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 0.45rem;
  color: #556677;
}
.breadcrumb a {
  color: #7E8E9F;
  transition: color var(--transition-fast);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-white); }
.breadcrumb li[aria-current="page"] { color: #A0B0C0; font-weight: var(--fw-medium); }

.flash-banner {
  padding-block: 0.85rem;
  text-align: center;
  font-weight: var(--fw-medium);
  font-size: 0.92rem;
}
.flash-banner--success { background: #E4F9F3; color: #066A55; }
.flash-banner--error { background: #FDECEC; color: #A32323; }

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.7rem 1rem;
  text-align: center;
  font-weight: var(--fw-medium);
  font-size: 0.9rem;
  background: var(--color-cta);
  color: #1a1200;
}
.preview-banner a {
  color: inherit;
  text-decoration: underline;
  margin-left: 0.5rem;
}

/* ---------------------------------------------------------------------
   9. Header & Navigation (Mobile-First with Drawer)
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  /* Must outrank .nav-backdrop (990): sticky + z-index makes this a stacking
     context, so the fixed .primary-nav drawer nested inside it (z-index 1000)
     can never rise above the backdrop otherwise, no matter its own z-index. */
  z-index: 1001;
  background: #091527;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  transition: transform 0.3s ease;
  /* Promotes the hide/show slide to its own GPU compositing layer instead
     of one recomputed on the main thread every scroll frame — on mobile,
     a sticky element whose transform is toggled by a scroll listener
     otherwise visibly lags a frame or more behind the actual scroll
     position before it catches up ("snaps"). */
  will-change: transform;
}
.site-header--dark { background: #091527; }
.site-header--hidden { transform: translateY(-100%); }

/* Hanging Logo Badge (Mobile-First) */
.brand--hanging-badge {
  position: absolute;
  top: 0;
  left: var(--container-padding);
  z-index: 120;
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease;
}
/* The badge hangs lower than the header bar itself, so sliding the header
   up via transform still leaves its bottom curve peeking below the edge —
   fade it out in step with the header instead of relying on the slide. */
.site-header--hidden .brand--hanging-badge {
  opacity: 0;
  pointer-events: none;
}
.brand__badge-body {
  background: #FFFFFF;
  width: 112px;
  min-height: 84px;
  border-radius: 0 0 56px 56px;
  padding: 8px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand--hanging-badge:hover .brand__badge-body {
  transform: translateY(2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
.brand__logo-img {
  width: 100%;
  height: auto;
  max-width: 90px;
  object-fit: contain;
  display: block;
}
.brand-spacer {
  width: 112px;
  flex-shrink: 0;
}

.main-header {
  position: relative;
  width: 100%;
}
.main-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.55rem;
  min-height: var(--header-height);
}
.main-header__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

/* "Talk to an Expert" Header Button (Touch-Friendly) */
.btn--expert {
  position: relative;
  background: linear-gradient(135deg, #FFDE85 0%, #F9BB3D 35%, #F5A623 65%, #E0891A 100%);
  color: #16110a;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.55rem 0.95rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
  isolation: isolate;
  box-shadow: 0 3px 10px rgba(245, 166, 35, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
/* Vivid gold gradient ring, glowing softly behind the button — same
   glass/glow language as the chatbot launcher pill's ::before ring. */
.btn--expert::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #E0891A, #F5A623, #FFDE85, #FFC24D, #F5A623, #E0891A);
  background-size: 240% 100%;
  filter: blur(9px);
  opacity: 0.75;
  animation: btn-expert-gradient-sweep 5s ease-in-out infinite;
  pointer-events: none;
}
.btn--expert:hover, .btn--expert:focus-visible {
  color: #16110a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn--expert:hover::before, .btn--expert:focus-visible::before {
  inset: -4px;
  opacity: 1;
  filter: blur(11px);
  animation-duration: 3s;
}
.btn--expert .icon {
  width: 15px;
  height: 15px;
  stroke: #16110a;
}

@keyframes btn-expert-gradient-sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--expert::before {
    animation: none;
  }
}

/* Hide button text on extra-small mobile (< 480px) to prevent badge clash */
@media (max-width: 479px) {
  .btn--expert span {
    display: none;
  }
  .btn--expert {
    padding: 0.55rem;
    width: 44px;
    height: 44px;
  }
}

/* Nav Toggle Hamburger Button (44x44px target) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle--dark .nav-toggle__bar {
  width: 22px;
  height: 2.5px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Backdrop overlay when mobile drawer is open */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.nav-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

/* Primary Nav Mobile Drawer (< 1024px) */
.primary-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  height: 100vh;
  height: 100dvh;
  background: #0B192C;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
  /* transform instead of animating `right` — `right` is a layout
     property (triggers reflow every frame), transform is compositor-only,
     which is what actually makes the slide-in feel smooth on mobile
     instead of visibly stepping/lagging. */
  transform: translateX(100%);
  transition: transform var(--transition-base);
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.5rem);
}
.primary-nav[data-open="true"] {
  transform: translateX(0);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}
.nav-list__item {
  width: 100%;
  position: relative;
}
.nav-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  min-height: 44px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-list__link:hover, .nav-list__link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #F5A623;
}
.nav-list__link.active {
  color: #00D2FF;
  font-weight: var(--fw-bold);
  background: rgba(0, 210, 255, 0.12);
  border-left: 3px solid #00D2FF;
  box-shadow: inset 0 0 12px rgba(0, 210, 255, 0.15);
}
.nav-list__caret {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  flex-shrink: 0;
}

/* Mobile dropdown sub-items */
.nav-dropdown {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.25rem 0 0.5rem 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  color: #8A99AD;
  border-radius: 6px;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

/* Tablet Upgrades (576px - 1023px) */
@media (min-width: 576px) {
  .brand__badge-body {
    width: 126px;
    min-height: 96px;
    border-radius: 0 0 63px 63px;
    padding: 10px 14px 18px;
  }
  .brand__logo-img {
    max-width: 104px;
  }
  .brand-spacer {
    width: 126px;
  }
  .btn--expert {
    padding: 0.65rem 1.2rem;
    font-size: 0.88rem;
  }
}

/* Desktop Upgrades (> 1024px) */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-backdrop { display: none !important; }

  .brand--hanging-badge {
    left: max(calc((100vw - var(--container-max)) / 2 + var(--container-padding)), var(--container-padding));
  }
  .brand__badge-body {
    width: 146px;
    min-height: 120px;
    border-radius: 0 0 73px 73px;
    padding: 16px 14px 22px;
  }
  .brand__logo-img {
    max-width: 122px;
  }
  .brand-spacer {
    width: 146px;
  }

  .primary-nav {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    flex-direction: row;
    display: block;
    /* The mobile drawer's translateX(100%) doesn't get cleared just by
       position:static — transform applies regardless of position — so
       without this the desktop nav would sit shifted off-screen. */
    transform: none;
  }
  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    width: auto;
  }
  .nav-list__item {
    width: auto;
  }
  .nav-list__link {
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    padding: 0.55rem 0.8rem;
    font-size: 0.91rem;
    color: #E2E8F0;
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }
  .nav-list__link.active {
    color: #FFFFFF;
    font-weight: var(--fw-bold);
    background: transparent;
    border-bottom: none;
    border-radius: 0;
  }
  /* Dropdown hover on desktop */
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 275px;
    background: #0B192C;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
    margin: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav-list__item--dropdown:hover .nav-dropdown,
  .nav-list__item--dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-dropdown a {
    min-height: 38px;
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem;
    white-space: nowrap;
  }
}

/* Narrow-desktop tier (1024px-1279px): the full nav + "Talk to an Expert"
   button no longer fit the container at this width, causing horizontal
   page overflow. Tighten nav spacing and collapse the button to icon-only
   (same treatment already used below 480px) until there's more room. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .main-header__inner {
    gap: 0.4rem;
  }
  .nav-list {
    gap: 0;
  }
  .nav-list__link {
    padding: 0.55rem 0.5rem;
    font-size: 0.82rem;
  }
  .btn--expert span {
    display: none;
  }
  .btn--expert {
    padding: 0.55rem;
    width: 44px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------
   10. Footer (Mobile-First to 5-Columns)
   --------------------------------------------------------------------- */
.site-footer {
  background: #07111E;
  color: #8C9BA8;
  width: 100%;
}

.site-footer__grid--exact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.site-footer__grid--exact > * { min-width: 0; }

.footer-brand--clean .footer-brand__text {
  color: #8C9BA8;
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 1.25rem;
}

.social-list--circles {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.social-list--circles a {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: #132235;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.social-list--circles a:hover, .social-list--circles a:focus-visible {
  background: #00A896;
  transform: translateY(-2px);
}
.social-list--circles .social-icon-in {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: sans-serif;
  line-height: 1;
}
.social-list--circles .icon {
  width: 16px;
  height: 16px;
  fill: #FFFFFF;
}

.footer-col__title {
  color: #FFFFFF;
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.footer-links li {
  margin: 0;
}
.footer-links a {
  color: #8C9BA8;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding-block: 2px;
  transition: color var(--transition-fast);
}
.footer-links a:hover, .footer-links a:focus-visible {
  color: #FFFFFF;
}

.footer-col--newsletter .footer-newsletter__text {
  color: #8C9BA8;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.newsletter-form--compact .newsletter-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
@media (min-width: 480px) {
  .newsletter-form--compact .newsletter-form__row {
    flex-direction: row;
    gap: 0.5rem;
  }
}
.newsletter-form--compact input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: #111E30;
  border: 1px solid #1E334D;
  border-radius: 6px;
  padding: 0.65rem 0.95rem;
  font-size: 0.88rem;
  color: #FFFFFF;
}
.newsletter-form--compact input::placeholder {
  color: #556B82;
}
.btn--newsletter-join {
  background: #F5A623;
  color: #0B192C;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}
.btn--newsletter-join:hover, .btn--newsletter-join:focus-visible {
  background: #E09618;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 1.35rem;
}
.site-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
}
.copyright-text {
  color: #5F7285;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  margin: 0;
}

/* Footer Tablet Breakpoint (576px - 1023px) */
@media (min-width: 576px) and (max-width: 1023px) {
  .site-footer__grid--exact {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-col--newsletter {
    grid-column: 1 / -1;
  }
}

/* Footer Desktop Breakpoint (> 1024px) */
@media (min-width: 1024px) {
  .site-footer__grid--exact {
    grid-template-columns: 1.35fr 0.85fr 0.95fr 0.85fr 1.25fr;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .footer-brand {
    grid-column: auto;
  }
  .footer-col--newsletter {
    grid-column: auto;
  }
}

/* ---------------------------------------------------------------------
   11. Grid Utilities & Responsive Layout System
   --------------------------------------------------------------------- */
.text-center { text-align: center; }

.badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-dark);
  margin-right: 0.4rem;
  vertical-align: middle;
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: var(--fw-medium);
  color: var(--color-primary-end);
  min-height: 38px;
}
.tag-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }

.bg-tint { background: var(--color-surface-tint); }
.bg-muted { background: var(--color-surface-muted); }
.bg-primary-gradient { background: var(--gradient-primary); color: var(--color-white); }
.bg-secondary-gradient { background: var(--gradient-secondary); color: var(--color-white); }

/* Global Grid System (Mobile-First) */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.grid > * { min-width: 0; }

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.stack { display: flex; flex-direction: column; }
.image-frame { border-radius: var(--radius-md); overflow: hidden; }
.image-placeholder {
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-surface-muted), var(--color-surface-tint));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}
.image-placeholder--square { aspect-ratio: 1 / 1; }
.image-placeholder--on-dark { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }

.mt-1 { margin-top: 0.85rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 1.75rem; }
.max-w-sm { max-width: 560px; margin-inline: auto; }
.max-w-md { max-width: 640px; margin-inline: auto; }
.bg-primary-gradient,
.bg-secondary-gradient {
  background: #0B192C;
  color: var(--color-white);
}

.bg-primary-gradient h1,
.bg-primary-gradient h2,
.bg-primary-gradient h3,
.bg-primary-gradient h4,
.bg-secondary-gradient h1,
.bg-secondary-gradient h2,
.bg-secondary-gradient h3,
.bg-secondary-gradient h4 {
  color: #FFFFFF !important;
}

.bg-primary-gradient p,
.bg-secondary-gradient p {
  color: #94A3B8 !important;
}

/* ---------------------------------------------------------------------
   12. Global Call-to-Action (CTA) Band
   --------------------------------------------------------------------- */
.cta-band {
  background: #0B192C !important;
  background: radial-gradient(ellipse at 50% 25%, #102640 0%, #0B192C 65%, #07121F 100%) !important;
  color: #FFFFFF !important;
  padding-block: clamp(4.5rem, 8vw, 6.5rem);
  text-align: center;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cta-band h2 {
  color: #FFFFFF !important;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 1.15rem;
}

.cta-band p,
.cta-band__text,
.cta-text {
  color: #94A3B8 !important;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: 2.25rem;
  line-height: 1.65;
}

.cta-band .btn-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}

@media (min-width: 576px) {
  .cta-band .btn-row {
    flex-direction: row;
    width: auto;
    max-width: none;
  }
}

.cta-band .btn--cta {
  background: #F5B82E !important;
  color: #0B192C !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.85rem;
  border-radius: 8px;
  border: 1.5px solid transparent;
  box-shadow: 0 0 24px rgba(245, 184, 46, 0.45), 0 4px 14px rgba(245, 184, 46, 0.35);
  min-height: 46px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cta-band .btn--cta:hover,
.cta-band .btn--cta:focus-visible {
  background: #E5A81E !important;
  color: #0B192C !important;
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(245, 184, 46, 0.65), 0 6px 18px rgba(245, 184, 46, 0.45);
}

.cta-band .btn--outline,
.cta-band .btn--outline-glass,
.btn--outline-glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.85rem;
  border-radius: 8px;
  min-height: 46px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cta-band .btn--outline:hover,
.cta-band .btn--outline:focus-visible,
.cta-band .btn--outline-glass:hover,
.cta-band .btn--outline-glass:focus-visible,
.btn--outline-glass:hover,
.btn--outline-glass:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   13. Animated Industries Served Grid & Micro-Animations
   --------------------------------------------------------------------- */
.industries {
  padding-block: clamp(3rem, 6vw, 5rem);
  width: 100%;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  text-align: center;
  width: 100%;
}

@media (min-width: 576px) {
  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .industries-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
  }
}

.industry-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 1.25rem;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid #EEF2F6;
  box-shadow: 0 2px 8px rgba(11, 25, 44, 0.02);
  cursor: pointer;
  outline: none;
  min-height: 120px;
  text-align: left;
  width: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.industry-tile:hover,
.industry-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(11, 25, 44, 0.06);
  border-color: #CBD5E1;
}

.industry-tile:active {
  transform: translateY(-1px);
}

/* Tile Icon Badges (Pastel Squircles) */
.industry-tile .icon-tile {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.industry-tile:hover .icon-tile,
.industry-tile:focus-visible .icon-tile {
  transform: scale(1.06);
}

.industry-tile .icon-tile .icon {
  width: 22px;
  height: 22px;
}

/* Pastel Tinted Colors matching exact screenshot */
.icon-tile--teal {
  background: #E0FBF7;
  color: #0D9488;
}

.icon-tile--orange {
  background: #FFF1E6;
  color: #EA580C;
}

.icon-tile--purple {
  background: #F3E8FF;
  color: #9333EA;
}

.icon-tile--green {
  background: #DCFCE7;
  color: #16A34A;
}

.icon-tile--pink {
  background: #FFE4E6;
  color: #E11D48;
}

.icon-tile--yellow {
  background: #FEF3C7;
  color: #D97706;
}

.icon-tile--blue {
  background: #E0E7FF;
  color: #4F46E5;
}

.icon-tile--sky {
  background: #E0F2FE;
  color: #0284C7;
}

.icon-tile--violet {
  background: #EDE9FE;
  color: #7C3AED;
}

.icon-tile--cyan {
  background: #E0F7FA;
  color: #0891B2;
}

/* Industry Labels */
.industry-tile p {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0B192C;
  margin: 0;
  line-height: 1.3;
  text-align: left;
}

/* ---------------------------------------------------------------------
   Micro-Animations per Industry (Targeted)
   --------------------------------------------------------------------- */

/* 1. Government (Pillars & Elevation) */
.industry-tile--government:hover .icon,
.industry-tile--government:focus-visible .icon {
  animation: anim-gov 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Commercial Buildings (Rise & Polish) */
.industry-tile--commercial-buildings:hover .icon,
.industry-tile--commercial-buildings:focus-visible .icon {
  animation: anim-building 0.75s ease;
}

/* 3. Industrial Parks (Factory Smoke / Sway) */
.industry-tile--industrial-parks:hover .icon,
.industry-tile--industrial-parks:focus-visible .icon {
  animation: anim-factory 0.8s ease;
}

/* 4. Manufacturing (High-Tech Rotating Gear) */
.industry-tile--manufacturing:hover .icon,
.industry-tile--manufacturing:focus-visible .icon {
  animation: anim-gear-spin 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 5. Healthcare (Vibrant Heartbeat Pulse) */
.industry-tile--healthcare:hover .icon,
.industry-tile--healthcare:focus-visible .icon {
  animation: anim-heartbeat 1.1s ease-in-out infinite;
}

/* 6. Education (Graduation Cap celebratory swing) */
.industry-tile--education:hover .icon,
.industry-tile--education:focus-visible .icon {
  animation: anim-cap-toss 0.85s ease-in-out;
}

/* 7. Data Centers (Server Rack Activity Scan) */
.industry-tile--data-centers:hover .icon,
.industry-tile--data-centers:focus-visible .icon {
  animation: anim-server-pulse 1.1s ease-in-out infinite;
}

/* 8. Airports (Airplane Takeoff Angle Swoop) */
.industry-tile--airports:hover .icon,
.industry-tile--airports:focus-visible .icon {
  animation: anim-airplane 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 9. Smart Cities (Dynamic Skyline Expand) */
.industry-tile--smart-cities:hover .icon,
.industry-tile--smart-cities:focus-visible .icon {
  animation: anim-smart-city 0.85s ease;
}

/* 10. Utilities (Energetic Zap Flash) */
.industry-tile--utilities:hover .icon,
.industry-tile--utilities:focus-visible .icon {
  animation: anim-zap 0.8s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   Animation Keyframes
   --------------------------------------------------------------------- */
@keyframes tile-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes anim-gov {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-5px) scale(1.12); }
  70% { transform: translateY(1px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes anim-building {
  0% { transform: scaleY(1); }
  35% { transform: scaleY(1.2) translateY(-3px); }
  65% { transform: scaleY(0.96); }
  100% { transform: scaleY(1) translateY(0); }
}

@keyframes anim-factory {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg) scale(1.1); }
  50% { transform: rotate(6deg) scale(1.06); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes anim-gear-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes anim-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(219, 39, 119, 0.4)); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); filter: drop-shadow(0 0 4px rgba(219, 39, 119, 0.3)); }
  70% { transform: scale(1); }
}

@keyframes anim-cap-toss {
  0% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-14deg) translateY(-5px) scale(1.14); }
  60% { transform: rotate(8deg) translateY(-2px); }
  100% { transform: rotate(0deg) translateY(0); }
}

@keyframes anim-server-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(13, 148, 136, 0)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(13, 148, 136, 0.65)); }
}

@keyframes anim-airplane {
  0% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(4px, -4px) rotate(14deg) scale(1.14); }
  75% { transform: translate(-1px, 1px) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes anim-smart-city {
  0% { transform: scale(1); }
  40% { transform: scale(1.15) translateY(-3px); }
  100% { transform: scale(1); }
}

@keyframes anim-zap {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(234, 88, 12, 0)); }
  25% { transform: scale(1.2) rotate(-8deg); filter: drop-shadow(0 0 8px rgba(234, 88, 12, 0.75)); }
  50% { transform: scale(1.05) rotate(4deg); }
  75% { transform: scale(1.15) rotate(-4deg); filter: drop-shadow(0 0 5px rgba(234, 88, 12, 0.5)); }
}


.typewriter-cursor { font-weight: 300; font-size: inherit; color: var(--color-primary-start); animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---- SVG Hero Wrap ---- */
.hero-svg-wrap {
  position: relative;
  display: block;
  width: 100%;
  /* Matches the hub image's intrinsic 1536x1024 size. Without a definite
     height here, the wrap's height stays "auto" and every percentage-based
     top/height/padding-top on the absolutely-positioned .svg-hit hotspots
     below has no containing block to resolve against, collapsing them to
     zero size. */
  aspect-ratio: 1536 / 1024;
  line-height: 0;
}
.hero-svg-wrap .about-hero__network-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Floating label shown when a node is hovered inside the SVG — just the
   text itself (no dot, no pointer/badge chrome), set in a light gradient
   fill with a soft glow so it reads as a premium caption rather than a UI
   tooltip. Stays in the DOM at all times (visibility/opacity toggle via
   .is-visible, not the [hidden] attribute) so the entrance can actually
   transition instead of popping — display:none can't be animated. */
.svg-node-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.94);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  /* Frosted-glass pill, matching the hero's "INFRASTRUCTURE OPERATIONS
     PLATFORM" badge treatment — a translucent blurred surface with a
     hairline border, instead of the label floating bare over the busy
     artwork with nothing but a text-shadow for contrast. */
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill, 999px);
  background: rgba(6, 18, 32, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Same cyan glowing border as the active "Home" nav link
     (.nav-list__link.active), so the hub's own callout reads as part of
     the same visual language instead of a one-off tooltip style. */
  border: 1px solid rgba(0, 210, 255, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 210, 255, 0.55), 0 0 26px rgba(0, 210, 255, 0.35);
  /* .hero-svg-wrap sets line-height:0 (to close up the <img>'s baseline
     gap) which would otherwise inherit down and collapse this label's
     text line-box to zero height. */
  line-height: normal;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
  z-index: 20;
}
.svg-node-tooltip.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.svg-node-tooltip[hidden] {
  display: none !important;
}

/* Left-to-right light sweep across the label text — same shimmer
   language as .hero-tag::after on the hero capability pills — so the
   callout reads as actively "scanning" rather than a static caption. */
.svg-node-tooltip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.4) 48%, transparent 66%);
  transform: translateX(-140%);
  opacity: 0;
  pointer-events: none;
}
/* Driven by .is-sweeping rather than .is-visible — JS force-restarts
   that class on every showTooltip() call (real hover or the auto-cycle
   intro) so every node gets its own fresh sweep, instead of one
   perpetual loop whose "visible" phase only happened to line up with
   some nodes' display window. */
.svg-node-tooltip.is-sweeping::after {
  animation: tooltip-text-sweep 1.3s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes tooltip-text-sweep {
  0% { transform: translateX(-140%); opacity: 0; }
  20% { opacity: 1; }
  70%, 100% { transform: translateX(140%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svg-node-tooltip.is-sweeping::after {
    animation: none;
  }
}
#svg-tooltip-text {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #eaf5ff;
  /* Layered blue glow — a tight bright core plus a wider soft halo — to
     match the neon-blue node glow in the hub artwork behind it. */
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.75),
    0 0 12px rgba(56, 176, 255, 0.85),
    0 0 26px rgba(56, 176, 255, 0.6),
    0 0 46px rgba(30, 130, 255, 0.4);
}

/* Cursor pointer over hotspot nodes */
.hero-svg-wrap object,
.hero-svg-wrap img {
  cursor: default;
  display: block;
  width: 100%;
  height: auto;
}

/* Invisible elliptical hit-areas positioned over each SVG node, sized to
   cover each node's whole isometric platform footprint (not just a small
   dot at its center) so the entire visible platform is touchable/hoverable.
   Every node uses the same width/padding-top (22% / 12% of the wrap's
   width — padding always resolves against width, so this ratio renders
   as a consistent 22:12 ellipse for all 7, never a one-off distorted
   shape), sized via the padding-top aspect-ratio trick (height:0 plus a
   percentage padding-top) — that trick only works with box-sizing:
   content-box, where padding adds to the box instead of being capped by
   an explicit height:0 as the global border-box reset would otherwise
   force, collapsing every hit-area to zero height.
   Per-node position lives here — as static rules, not inline style=""
   attributes — because the site's CSP (style-src has no 'unsafe-inline')
   makes browsers silently drop inline styles entirely, which previously
   collapsed every hit-area to zero size for real visitors. Values derived
   from SVG viewBox="0 0 1536 1024" node centers (cx, cy) — see each rule
   below — with the ellipse's half-width/half-height baked into the offset:
   left = cx/1536*100% - 11%   top = (cy/1536 - 0.06) * 150% */
.svg-hit {
  position: absolute;
  display: block;
  box-sizing: content-box;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 9999;
  width: 22%;
  padding-top: 12%;
  height: 0;
}
.svg-hit:focus-visible {
  outline: 3px solid rgba(9, 198, 167, 0.8);
  outline-offset: 4px;
}

.svg-hit[data-index="0"] { left: 6.58%; top: 20.30%; }  /* node-monitoring: cx=270 cy=300 */
.svg-hit[data-index="1"] { left: 38.48%; top: 6.63%; }  /* node-office: cx=760 cy=160 */
.svg-hit[data-index="2"] { left: 63.87%; top: 13.46%; } /* node-facility: cx=1150 cy=230 */
.svg-hit[data-index="3"] { left: 69.08%; top: 37.88%; } /* node-factory: cx=1230 cy=480 */
.svg-hit[data-index="4"] { left: 54.76%; top: 61.31%; } /* node-security: cx=1010 cy=720 */
.svg-hit[data-index="5"] { left: 26.76%; top: 64.24%; } /* node-datacenter: cx=580 cy=750 */
.svg-hit[data-index="6"] { left: 3.97%; top: 51.55%; }  /* node-field: cx=230 cy=620 */

.hero-hotspot {
  position: absolute;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}



.hero-hotspot__tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(10, 27, 46, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.hero-hotspot__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(10, 27, 46, 0.85) transparent transparent transparent;
}

.hero-hotspot:hover .hero-hotspot__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


.hero-hotspot[data-index="0"] { top: 48%; left: 50%; }
.hero-hotspot[data-index="1"] { top: 25%; left: 73%; }
.hero-hotspot[data-index="2"] { top: 80%; left: 30%; }
.hero-hotspot[data-index="3"] { top: 55%; left: 85%; }
.hero-hotspot[data-index="4"] { top: 80%; left: 70%; }
.hero-hotspot[data-index="5"] { top: 25%; left: 27%; }
.hero-hotspot[data-index="6"] { top: 55%; left: 15%; }

/* ---- Hero Video Background ---- */
.about-hero {
  position: relative;
  z-index: 0;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.6; /* Increased opacity */
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Scroll Reveal Animations — triggered by the AOS library (see
   vendor/aos + AOS.init() in main.js) instead of the old hand-rolled
   IntersectionObserver. AOS only ships CSS for its own built-in
   animation names (fade-*, zoom-*, slide-*, flip-*), so these
   custom-named animations ("reveal-up" etc.) still need their own
   hidden/visible CSS here — AOS just adds/removes the .aos-animate
   class at the right time (once, with correct offset/duration/delay
   handling and no more replay-on-scroll-back flicker) and drives
   data-aos-delay via its own stylesheet.
   --------------------------------------------------------------------- */

/* Initial hidden states */
[data-aos="reveal-up"] {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-aos="reveal-scale"] {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Revealed state — added by AOS once the element scrolls into view */
[data-aos="reveal-up"].aos-animate,
[data-aos="reveal-scale"].aos-animate {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* ---------------------------------------------------------------------
   Premium Directional Reveals
   --------------------------------------------------------------------- */
[data-aos="reveal-left"] {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-aos="reveal-right"] {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-aos="reveal-left"].aos-animate,
[data-aos="reveal-right"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}

/* ---------------------------------------------------------------------
   Hero Entrance Animations (CSS keyframe, runs on page load)
   --------------------------------------------------------------------- */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-fade-right {
  from { opacity: 0; transform: translateX(36px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.hero-anim-badge {
  animation: hero-fade-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-anim-heading {
  animation: hero-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.hero-anim-tags {
  animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.hero-anim-text {
  animation: hero-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}
.hero-anim-btns {
  animation: hero-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}
.hero-anim-media {
  animation: hero-fade-right 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

/* ---------------------------------------------------------------------
   Hero capability tags — small pill row under the H1
   --------------------------------------------------------------------- */
.hero-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 1.1rem 0 1.35rem;
  padding: 0;
}
.hero-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill, 999px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.25s ease;
  opacity: 0;
  /* Two animations at once: hero-fade-up runs once (the pill's entrance,
     staggered a beat apart per tag below), then tag-scan-glow loops
     forever — a slow, softly-eased highlight that visits each tag in
     turn, like the system is actively watching each capability rather
     than a static label sitting there. Kept off transform/opacity (owned
     by the entrance + :hover) so the two never fight over the same
     property. */
  animation: hero-fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both,
             tag-scan-glow 7.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.hero-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00B4A0;
  box-shadow: 0 0 6px rgba(0, 180, 160, 0.7);
  flex-shrink: 0;
  transition: transform 0.25s ease;
  animation: tag-scan-dot 7.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.hero-tag::after {
  /* Light sweep — traces across the pill in sync with its glow window,
     the same shimmer language used on the footer wordmark, so an active
     tag reads as catching light rather than just recoloring. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
  transform: translateX(-140%);
  opacity: 0;
  animation: tag-scan-sweep 7.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.hero-tag:hover {
  transform: translateY(-2px);
}
.hero-tag:hover::before {
  transform: scale(1.3);
}

/* Each tag runs the exact same 7.5s loop, just phase-shifted by a third
   of the cycle (negative delay = start already partway through), so the
   highlighted "active" window rotates: tag 1, then tag 2, then tag 3,
   on repeat. Entrance delay (first value) stays staggered as before;
   only the loop's phase (second value) is offset. */
.hero-tag--stagger-1 { animation-delay: 0.55s, 0s; }
.hero-tag--stagger-2 { animation-delay: 0.68s, -2.5s; }
.hero-tag--stagger-3 { animation-delay: 0.81s, -5s; }
.hero-tag--stagger-1::before, .hero-tag--stagger-1::after { animation-delay: 0s; }
.hero-tag--stagger-2::before, .hero-tag--stagger-2::after { animation-delay: -2.5s; }
.hero-tag--stagger-3::before, .hero-tag--stagger-3::after { animation-delay: -5s; }

@keyframes tag-scan-glow {
  0%, 66.6%, 100% {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 rgba(0, 180, 160, 0);
    color: rgba(255, 255, 255, 0.88);
  }
  6.6% {
    background: rgba(0, 180, 160, 0.22);
    border-color: rgba(0, 180, 160, 0.6);
    box-shadow: 0 6px 24px -4px rgba(0, 180, 160, 0.45), inset 0 0 0 1px rgba(0, 180, 160, 0.2);
    color: #ffffff;
  }
  13.3% {
    background: rgba(0, 180, 160, 0.22);
    border-color: rgba(0, 180, 160, 0.6);
    box-shadow: 0 6px 24px -4px rgba(0, 180, 160, 0.45), inset 0 0 0 1px rgba(0, 180, 160, 0.2);
    color: #ffffff;
  }
  20% {
    background: rgba(0, 180, 160, 0.22);
    border-color: rgba(0, 180, 160, 0.6);
    box-shadow: 0 6px 24px -4px rgba(0, 180, 160, 0.45), inset 0 0 0 1px rgba(0, 180, 160, 0.2);
    color: #ffffff;
  }
}
@keyframes tag-scan-dot {
  0%, 66.6%, 100% { box-shadow: 0 0 6px rgba(0, 180, 160, 0.7); transform: scale(1); }
  4%   { box-shadow: 0 0 14px 3px rgba(0, 180, 160, 1); transform: scale(1.6); }
  13.3% { box-shadow: 0 0 12px rgba(0, 180, 160, 1); transform: scale(1); }
  20%  { box-shadow: 0 0 12px rgba(0, 180, 160, 1); transform: scale(1); }
}
@keyframes tag-scan-sweep {
  0%, 66.6%, 100% { transform: translateX(-140%); opacity: 0; }
  5%   { opacity: 1; }
  16%  { transform: translateX(140%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tag {
    animation: hero-fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-tag::before,
  .hero-tag::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   Stat tile shimmer on hover
   --------------------------------------------------------------------- */
.stat-tile--compact {
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-tile--compact:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 25, 44, 0.08);
}
.stat-tile--compact::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}
.stat-tile--compact:hover::after {
  transform: translateX(100%);
  transition: transform 0.55s ease;
}

/* ---------------------------------------------------------------------
   Expertise card lift + glow on hover
   --------------------------------------------------------------------- */
.expertise-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease !important;
}
.expertise-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 48px rgba(11, 25, 44, 0.14) !important;
}

/* ---------------------------------------------------------------------
   Discipline card number counter glow
   --------------------------------------------------------------------- */
.discipline-card:hover .discipline-card__number {
  color: var(--color-accent);
  transition: color 0.3s ease;
}
.discipline-card:hover .icon-tile {
  background: var(--color-primary-end);
  transform: scale(1.08);
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------------
   Industry tile scale pop
   --------------------------------------------------------------------- */
.industry-tile {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.industry-tile:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 32px rgba(11, 25, 44, 0.1);
}

/* ---------------------------------------------------------------------
   CTA band button pulse glow
   --------------------------------------------------------------------- */
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 46, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(245, 184, 46, 0); }
}
.cta-band .btn--cta {
  animation: cta-glow 2.5s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   Footer Premium Big Text
   --------------------------------------------------------------------- */
.footer-big-text-wrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem 0;
  position: relative;
  z-index: 1;
}

.footer-big-text {
  /* A distinct bold display face for this one watermark — deliberately
     different from the Space Grotesk headings and Inter body copy used
     everywhere else, so it reads as a brand mark rather than more text. */
  font-family: 'Unbounded', var(--font-heading);
  font-size: clamp(4.25rem, 15vw, 18rem);
  font-weight: 800;
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
  /* A wide, mostly-flat gradient with one brighter band in the middle —
     animating its position (see .is-revealed below) sweeps that band
     across the letters like light catching brushed metal. */
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.10) 60%,
    rgba(255, 255, 255, 0.10) 100%);
  background-size: 300% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  position: relative;
  display: inline-block;
  /* Hidden until it scrolls into view (data-aos="footer-shimmer",
     driven by AOS) rather than animating in immediately on page load,
     where nobody would be scrolled far enough down to ever see it. */
  opacity: 0;
  transform: translateY(15%) scale(0.97);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-big-text.aos-animate {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: bigTextShimmerSweep 5s linear 0.4s infinite, bigTextGlow 6s ease-in-out infinite alternate;
}

@keyframes bigTextShimmerSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

@keyframes bigTextGlow {
  0% {
    filter: drop-shadow(0 0 10px rgba(9, 198, 167, 0.0));
  }
  100% {
    filter: drop-shadow(0 0 30px rgba(9, 198, 167, 0.18));
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-big-text {
    transition: opacity 0.4s ease;
  }
  .footer-big-text.aos-animate {
    animation: none;
  }
}