/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --navy:       #0F1629;
  --navy-mid:   #162040;
  --navy-card:  #1C2A52;
  --gold:       #60a5fa;
  --gold-soft:  #93c5fd;
  --gold-dim:   rgba(59,130,246,0.18);
  --white:      #F5F0EA;
  --muted:      #8492B4;

  /* All slots are sized to active; side slots are scaled down via transform */
  --size-active: 180px;
  --scale-side:  0.61;       /* 110 / 180 ≈ 0.61  */
  --overlap:     38px;

  --speed: 520ms;
  --ease:  cubic-bezier(0.38, 0.02, 0.18, 1.0);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.my-custom-carousel .page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  
}

.my-custom-carousel .eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.my-custom-carousel .headline {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 44px;
  text-align: center;
}

/* ============================================================
   CAROUSEL CONTAINER
   ============================================================ */
.my-custom-carousel .carousel-container {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 260px;
  
  background-color: rgba(255, 255, 255, 0.027);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); 

  border-radius: 24px;
  margin-left: auto;
  margin-right: auto;
  
  border: 1px solid rgba(255, 255, 255, 0.2); 
  
  box-shadow: none; 
    
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   TRACK
   The track clips overflow so off-screen slots are invisible.
   ============================================================ */
.my-custom-carousel .carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SLOTS
   Every slot is the same rendered size (--size-active × --size-active).
   Position is controlled exclusively by translateX + scale.
   This means CSS transitions only need to animate transform — the
   smoothest, GPU-accelerated property — nothing else.
   ============================================================ */
.my-custom-carousel .slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size-active);
  height: var(--size-active);
  /* Center the element on its own origin point */
  margin-left: calc(var(--size-active) / -2);
  margin-top:  calc(var(--size-active) / -2);

  display: flex;
  align-items: center;
  justify-content: center;

  /* All movement is via transform only */
  transition: transform var(--speed) var(--ease),
              opacity  var(--speed) var(--ease);
  will-change: transform;
}

/*
  Position tokens — computed once, reused:
    active  →  translateX(0)           scale(1)
    prev    →  translateX(Xprev)       scale(--scale-side)
    next    →  translateX(Xnext)       scale(--scale-side)
    far-left → translateX(Xfar-left)  scale(--scale-side)   [invisible, off-screen]
    far-right→ translateX(Xfar-right) scale(--scale-side)   [invisible, off-screen]

  Xprev  = -(active/2 + side/2 - overlap)
         = -(90 + 55 - 38) = -107px
  Xnext  = +(active/2 + side/2 - overlap)
         = +(90 + 55 - 38) = +107px
  The off-screen positions just push further in the same direction.
*/
.my-custom-carousel .slot--active {
  transform: translateX(0) scale(1);
  z-index: 3;
  opacity: 1;
}

.my-custom-carousel .slot--prev {
  transform: translateX(-107px) scale(var(--scale-side));
  z-index: 2;
  opacity: 1;
}

.my-custom-carousel .slot--next {
  transform: translateX(107px) scale(var(--scale-side));
  z-index: 2;
  opacity: 1;
}

/* Waiting off-screen right (the "next-next", pre-staged) */
.my-custom-carousel .slot--far-right {
  transform: translateX(300px) scale(var(--scale-side));
  z-index: 1;
  opacity: 0;
}

/* Waiting off-screen left (the "prev-prev", pre-staged) */
.my-custom-carousel .slot--far-left {
  transform: translateX(-300px) scale(var(--scale-side));
  z-index: 1;
  opacity: 0;
}

/* During transition: no transition (instant reposition for pre-staging) */
.my-custom-carousel .slot--no-transition {
  transition: none !important;
}

/* ============================================================
   AVATAR CIRCLES
   ============================================================ */
.my-custom-carousel .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--navy-card);
  border: 3px solid rgba(59,130,246,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  user-select: none;
  position: relative;
  overflow: hidden;
  /* Avatar styling transitions separately */
  transition:
    border-color var(--speed) var(--ease),
    box-shadow   var(--speed) var(--ease),
    filter       var(--speed) var(--ease);
}

.my-custom-carousel .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Active avatar — gold ring + glow */
.my-custom-carousel .slot--active .avatar {
  border-color: var(--gold);
  filter: brightness(1);
  box-shadow:
    0 0 0 5px rgba(59,130,246,0.15),
    0 0 36px rgba(59,130,246,0.28),
    0 8px 32px rgba(0,0,0,0.6);
}

/* Pulse halo on active */
.my-custom-carousel .slot--active .avatar::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(59,130,246,0.3);
  animation: halo-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes halo-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 0.15; transform: scale(1.08); }
}

/* Side avatars — dimmed */
.my-custom-carousel .slot--prev .avatar,
.my-custom-carousel .slot--next .avatar {
  border-color: rgba(59,130,246,0.2);
  filter: brightness(0.65);
  box-shadow: none;
}

/* ============================================================
   FADE EDGES
   ============================================================ */
.my-custom-carousel .carousel-track::before,
.my-custom-carousel .carousel-track::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 68px;
  z-index: 10;
  pointer-events: none;
}
.my-custom-carousel .carousel-track::before {
  display: none;
  left: 0;
  background: linear-gradient(to right, var(--navy-mid), transparent);
}
.my-custom-carousel .carousel-track::after {
  display: none;
  right: 0;
  background: linear-gradient(to left, var(--navy-mid), transparent);
}

/* ============================================================
   NAV ARROWS
   ============================================================ */
.my-custom-carousel .nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,0.25);
  background: rgba(22,32,64,0.85);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.my-custom-carousel .nav-arrow svg { width: 18px; height: 18px; }
.my-custom-carousel .nav-arrow:hover {
  background: rgba(28,42,82,0.95);
  border-color: rgba(59,130,246,0.55);
}
.my-custom-carousel .nav-arrow:active { transform: translateY(-50%) scale(0.94); }

.my-custom-carousel .nav-arrow--left  { left: -20px; }
.my-custom-carousel .nav-arrow--right { right: -20px; }

/* ============================================================
   INFO PANEL
   ============================================================ */
.my-custom-carousel .info-panel {
  margin-top: 40px;
  min-height: 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.my-custom-carousel .info-inner {
  min-height: 32px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: center;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
}
.my-custom-carousel .info-inner.fade-in {
  animation: infoIn 260ms ease forwards;
}
.my-custom-carousel .info-inner.fade-out {
  animation: infoOut 180ms ease forwards;
}

@keyframes infoIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes infoOut {
  to { opacity: 0; transform: translateY(-6px); }
}

.my-custom-carousel .info-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
}
.my-custom-carousel .info-divider {
  color: var(--gold);
  font-weight: 600;
}
.my-custom-carousel .info-position {
  font-size: 0.95rem;
  color: var(--gold-soft);
  font-weight: 500;
}

/* ============================================================
   DOTS
   ============================================================ */
.my-custom-carousel .info-dots {
  display: flex;
  gap: 7px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
}
.my-custom-carousel .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  background: rgba(96,165,250,0.35);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}
.my-custom-carousel .dot--active {
  width: 20px;
  background: var(--gold);
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.my-custom-carousel .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  z-index: 12;
  opacity: 0.9;
}
.my-custom-carousel .progress-bar.running {
  animation: fill 3000ms linear forwards;
}
@keyframes fill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --size-active: 150px;
    --scale-side: 0.55;
  }

  .my-custom-carousel .carousel-container {
    height: 230px;
    max-width: 100%;
  }

  .my-custom-carousel .slot--prev {
    transform: translateX(-86px) scale(var(--scale-side));
  }
  .my-custom-carousel .slot--next {
    transform: translateX(86px) scale(var(--scale-side));
  }
  .my-custom-carousel .slot--far-left {
    transform: translateX(-260px) scale(var(--scale-side));
  }
  .my-custom-carousel .slot--far-right {
    transform: translateX(260px) scale(var(--scale-side));
  }

  .my-custom-carousel .nav-arrow--left  { left: 8px; }
  .my-custom-carousel .nav-arrow--right { right: 8px; }

  .my-custom-carousel .info-inner {
    flex-direction: column;
    gap: 4px;
  }
  .my-custom-carousel .info-divider {
    display: none;
  }
}
/* =========================
   Team Section - Gray Matter Style Fix
========================= */

.team.section {
  position: relative !important;
  padding: 110px 0 120px !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(59, 130, 246, 0.18), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.14), transparent 34%),
    linear-gradient(180deg, #020617 0%, #05070d 52%, #020617 100%) !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.team .container {
  width: min(1180px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
}

.team .section-header {
  max-width: 840px !important;
  margin: 0 auto 44px !important;
  text-align: center !important;
}

.team .section-label {
  width: fit-content !important;
  margin: 0 auto 16px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  background: rgba(56, 189, 248, 0.09) !important;
  color: #93c5fd !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.team .section-title {
  margin: 0 0 12px !important;
  color: #ffffff !important;
  font-size: clamp(34px, 5vw, 58px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.06em !important;
}

.team .section-subtitle {
  max-width: 690px !important;
  margin: 0 auto !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.my-custom-carousel .carousel-container {
  background:
    radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.11), transparent 42%),
    rgba(15, 23, 42, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.my-custom-carousel .info-panel {
  margin-top: 28px !important;
}

.my-custom-carousel .info-inner {
  opacity: 1 !important;
  transform: none !important;
  color: #ffffff !important;
}

.my-custom-carousel .info-name {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.my-custom-carousel .info-divider {
  color: #60a5fa !important;
}

.my-custom-carousel .info-position {
  color: #93c5fd !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.my-custom-carousel .dot {
  background: rgba(147, 197, 253, 0.36) !important;
}

.my-custom-carousel .dot--active {
  background: #60a5fa !important;
}

.my-custom-carousel .nav-arrow {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

.my-custom-carousel .nav-arrow:hover {
  background: rgba(37, 99, 235, 0.28) !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
}

.my-custom-carousel .slot--active .avatar {
  border-color: #60a5fa !important;
  box-shadow:
    0 0 0 5px rgba(96, 165, 250, 0.18),
    0 0 42px rgba(96, 165, 250, 0.32),
    0 16px 46px rgba(0, 0, 0, 0.62) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .team.section {
    padding: 78px 0 88px !important;
  }

  .team .container {
    width: min(100% - 24px, 1180px) !important;
  }

  .team .section-header {
    margin-bottom: 30px !important;
  }

  .team .section-title {
    font-size: 30px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.045em !important;
  }

  .team .section-subtitle {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .my-custom-carousel .carousel-container {
    height: 230px !important;
    border-radius: 22px !important;
  }

  .my-custom-carousel .info-name {
    font-size: 15px !important;
  }

  .my-custom-carousel .info-position {
    font-size: 12px !important;
  }
}