/* Scope everything to avoid leaking into home.css */
    .about-page { --muted: #6b7280; --brand: #0f172a; --accent: #2563eb; font-family: 'Poppins', system-ui, -apple-system, sans-serif; }

    /* Shimmer (scoped) */
    .about-page .shimmer {
      background: linear-gradient(90deg, #ff4d4d, #1e90ff, #ff4d4d);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 300%;
      animation: aboutShimmer 3s infinite linear;
    }
    @keyframes aboutShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

    /* Icon helpers (external images) */
    .about-page .icon {
      width: 1.25rem; height: 1.25rem; display:inline-block; vertical-align:middle; object-fit:contain;
    }

    /* Hero */
    .about-page .hero {
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      padding-top: 4rem; padding-bottom: 4rem;
    }
    .about-page .hero-card { max-width: 92rem; }

    /* Values grid */
    .about-page .value-card { transition: transform .18s ease, box-shadow .18s ease; }
    .about-page .value-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(16,24,40,0.06); }

    /* Timeline */
    .about-page .timeline { position: relative; }
    .about-page .timeline::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#e6edf9, #f3f6fb); border-radius: 2px; }

    /* Team */
    .about-page .team-photo { width:100%; height:14rem; object-fit:cover; border-radius: .75rem .75rem 0 0; }
    .about-page .team-card { overflow: hidden; border-radius: .75rem; }

    /* Modal */
    .about-page .team-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 60; }
    .about-page .team-modal.show { display:flex; }
    .about-page .team-modal .backdrop { position:absolute; inset:0; background:rgba(2,6,23,0.6); backdrop-filter: blur(4px); }
    .about-page .team-modal .panel { position:relative; z-index:2; max-width:48rem; width:94%; background:white; border-radius:12px; padding:1.25rem; }

    /* Counters */
    .about-page .counter { font-variant-numeric: tabular-nums; }

    /* Marquee clients */
    .about-page .clients-wrap { overflow:hidden; }
    .about-page .clients-track { display:flex; gap:3.5rem; align-items:center; transform:translateX(0); will-change:transform; }

    /* Small responsive tweaks */
    @media (min-width: 768px) {
      .about-page .team-photo { height:12.5rem; }
    }

    /* Utility: keep accessible focus outlines visible */
    .about-page a:focus, .about-page button:focus { outline: 3px solid rgba(37,99,235,0.18); outline-offset: 3px; border-radius: .5rem; }

    /* css/about.css (append or merge) */

/* Smooth anchor scrolling */
html {
  scroll-behavior: smooth;
}

/* Make header sticky and animate changes */
.about-page header {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease, transform .25s ease;
  /* start visually transparent so hero sits under it */
  background-color: rgba(255,255,255,0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Slight backing when content is scrolled beneath it (pure-CSS look) */
.about-page header::after {
  /* subtle gradient at header bottom to visually separate header from content */
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* sits slightly below header */
  height: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}


/* When page is scrolled the header will still keep a smooth look because of sticky
   BUT CSS alone cannot "know" scroll position to toggle a class. This rule is useful
   if you later add a `.scrolled` class via JS. It also works if server-side renders it. */
.about-page header.scrolled {
  background-color: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(16,24,40,0.06);
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* reveal animation (used by many cards/sections) */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2,.9,.2,1), transform .6s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* small helper: make hero text slightly animate in on load */
.hero .hero-card { 
  transform-origin: center;
  transition: transform .6s ease, opacity .6s ease;
}