@font-face {
  font-family:"DEDSO Team Inter";
  src:url("assets/team/inter-latin.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:"DEDSO Team Space";
  src:url("assets/team/space-grotesk-bold-latin.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

.team-section {
  --step-0:clamp(1rem,.96rem + .22vw,1.125rem);
  width:100vw;
  margin-inline:calc(50% - 50vw);
  padding:68px 0;
  color:#fff;
  background:rgb(var(--team-surface-rgb));
  font-family:"DEDSO Team Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--step-0);
  line-height:1.68;
}

.team-section > .container {
  width:min(100% - 40px,1180px);
  max-width:none;
  padding-inline:0;
}

.team-heading {
  margin:0 0 42px;
  text-align:center;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(30px,3.4cqw,52px);
  line-height:1.15;
  font-weight:450;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.team-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
    gap: 48px;
    align-items: center;
}

.team-stage {
    --team-front-y: 102px;
    --team-left-x: -94%;
    --team-left-y: 24px;
    --team-left-scale: 0.62;
    --team-right-x: -4%;
    --team-right-y: 42px;
    --team-right-scale: 0.64;
    position: relative;
    min-height: 610px;
    isolation: isolate;
}

.team-copy {
    max-width: 520px;
}

.team-copy h3 {
    margin: 0;
    font-family: "DEDSO Team Space", "DEDSO Team Inter", sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.team-copy p {
    margin: 1.25rem 0 0;
    color: #b5b5be;
    font-size: var(--step-0);
    line-height: 1.72;
}

.team-spotlight {
    --card-width: min(100%, 420px);
    --card-height: 535px;
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--card-width);
    height: var(--card-height);
    overflow: hidden;
    border-radius: 34px;
    border: none;
    background: transparent;
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.35);
    transform-origin: center center;
}

.team-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(rgba(17, 19, 24, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 24, 0.04) 1px, transparent 1px);
    background-size: auto, 28px 28px, 28px 28px;
    pointer-events: none;
}

.team-spotlight-1 {
    animation: team-card-one 12s ease-in-out infinite;
}

.team-spotlight-2 {
    animation: team-card-two 12s ease-in-out infinite;
}

.team-spotlight-3 {
    animation: team-card-three 12s ease-in-out infinite;
}

.team-portrait {
    position: absolute;
    inset: 0;
    display: block;
}

.team-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.team-portrait-founder {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(17, 19, 24, 0.04));
}

.team-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 84px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(48, 48, 48, 0.88);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px);
}

.team-caption strong {
    display: block;
    color: #fff;
    font-family: "DEDSO Team Space", "DEDSO Team Inter", sans-serif;
    font-size: clamp(1.1rem, 1.01rem + 0.34vw, 1.4rem);
    line-height: 1.06;
}

.team-caption span {
    display: block;
    margin-top: 6px;
    color: #d1d1d5;
    font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.95rem);
    line-height: 1.35;
}

@keyframes team-card-one {
    0%, 28% {
        transform: translateX(-50%) translateY(var(--team-front-y)) scale(1);
        filter: blur(0);
        opacity: 1;
        z-index: 3;
    }
    33%, 61% {
        transform: translateX(var(--team-left-x)) translateY(var(--team-left-y)) scale(var(--team-left-scale));
        filter: blur(5px);
        opacity: 0.38;
        z-index: 1;
    }
    66%, 94% {
        transform: translateX(var(--team-right-x)) translateY(var(--team-right-y)) scale(var(--team-right-scale));
        filter: blur(4px);
        opacity: 0.44;
        z-index: 2;
    }
    100% {
        transform: translateX(-50%) translateY(var(--team-front-y)) scale(1);
        filter: blur(0);
        opacity: 1;
        z-index: 3;
    }
}

@keyframes team-card-two {
    0%, 28% {
        transform: translateX(var(--team-right-x)) translateY(var(--team-right-y)) scale(var(--team-right-scale));
        filter: blur(4px);
        opacity: 0.44;
        z-index: 2;
    }
    33%, 61% {
        transform: translateX(-50%) translateY(var(--team-front-y)) scale(1);
        filter: blur(0);
        opacity: 1;
        z-index: 3;
    }
    66%, 94% {
        transform: translateX(var(--team-left-x)) translateY(var(--team-left-y)) scale(var(--team-left-scale));
        filter: blur(5px);
        opacity: 0.38;
        z-index: 1;
    }
    100% {
        transform: translateX(var(--team-right-x)) translateY(var(--team-right-y)) scale(var(--team-right-scale));
        filter: blur(4px);
        opacity: 0.44;
        z-index: 2;
    }
}

@keyframes team-card-three {
    0%, 28% {
        transform: translateX(var(--team-left-x)) translateY(var(--team-left-y)) scale(var(--team-left-scale));
        filter: blur(5px);
        opacity: 0.38;
        z-index: 1;
    }
    33%, 61% {
        transform: translateX(var(--team-right-x)) translateY(var(--team-right-y)) scale(var(--team-right-scale));
        filter: blur(4px);
        opacity: 0.44;
        z-index: 2;
    }
    66%, 94% {
        transform: translateX(-50%) translateY(var(--team-front-y)) scale(1);
        filter: blur(0);
        opacity: 1;
        z-index: 3;
    }
    100% {
        transform: translateX(var(--team-left-x)) translateY(var(--team-left-y)) scale(var(--team-left-scale));
        filter: blur(5px);
        opacity: 0.38;
        z-index: 1;
    }
}

@media(max-width:1080px) {
  .team-layout { grid-template-columns:1fr; gap:28px; }
  .team-copy { max-width:760px; margin:0 auto; text-align:center; }
  .team-stage {
    --team-front-y:96px;
    --team-left-x:-86%;
    --team-left-y:28px;
    --team-right-x:-10%;
    --team-right-y:42px;
    min-height:560px;
  }
  .team-spotlight { --card-width:min(100%,380px); --card-height:490px; left:50%; }
}

@media(max-width:860px) {
  .team-section { padding:52px 0; }
  .team-section > .container { width:min(100% - 28px,1180px); }
  .team-copy { text-align:left; }
  .team-stage {
    --team-front-y:82px;
    --team-left-x:-72%;
    --team-left-y:28px;
    --team-left-scale:.56;
    --team-right-x:-16%;
    --team-right-y:44px;
    --team-right-scale:.58;
    min-height:470px;
  }
  .team-spotlight { --card-width:min(100%,300px); --card-height:410px; border-radius:26px; }
  .team-caption { left:18px; right:18px; bottom:18px; min-height:88px; padding:18px 20px; border-radius:22px; }
}

@media(max-width:520px) {
  .team-layout { gap:22px; }
  .team-stage {
    --team-front-y:64px;
    --team-left-x:-64%;
    --team-left-y:20px;
    --team-left-scale:.48;
    --team-right-x:-20%;
    --team-right-y:30px;
    --team-right-scale:.5;
    min-height:388px;
  }
  .team-spotlight { --card-width:min(100%,220px); --card-height:320px; border-radius:22px; }
  .team-caption strong { font-size:.96rem; }
  .team-caption span { font-size:.78rem; }
}

@media(max-width:600px) {
  .team-heading { margin-bottom:28px; font-size:30px; }
}

@media(prefers-reduced-motion:reduce) {
  .team-spotlight { animation-play-state:paused; }
}