/*==================================================
TEAM HERO
==================================================*/

.team-hero{

    position:relative;

    overflow:hidden;

    padding:180px 0 120px;

    background:linear-gradient(
        180deg,
        var(--background),
        var(--section)
    );

}

.team-hero::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:430px;

    height:430px;

    border-radius:50%;

    background:radial-gradient(
        rgba(47,102,243,.10),
        transparent 70%
    );

}

.team-hero::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-200px;

    width:480px;

    height:480px;

    border-radius:50%;

    background:radial-gradient(
        rgba(174,184,164,.18),
        transparent 70%
    );

}

/*==================================================
TEAM HERO LAYOUT
==================================================*/

.team-hero-wrapper{

    display:grid;

    grid-template-columns:1.08fr .92fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}

/*==================================================
TEAM HERO CONTENT
==================================================*/

.team-hero-content h1{

    margin:26px 0;

}

.team-hero-content p{

    max-width:680px;

    margin-bottom:40px;

    font-size:1.08rem;

    line-height:1.9;

}

.team-hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

/*==================================================
TEAM HERO VISUAL
==================================================*/

.team-hero-visual{

    display:flex;

    justify-content:center;

}

/*==================================================
TEAM VISUAL CARD
==================================================*/

.team-visual-card{

    position:relative;

    width:100%;

    max-width:500px;

    padding:42px;

    border-radius:32px;

    background:rgba(255,255,255,.84);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border:1px solid var(--border);

    box-shadow:var(--shadow-lg);

    overflow:hidden;

}

.team-visual-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

    .team-hero-wrapper{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .team-hero-content p{

        margin:0 auto 36px;

    }

    .team-hero-buttons{

        justify-content:center;

    }

    .team-hero-visual{

        margin-top:10px;

    }

    .team-visual-card{

        text-align:left;

    }

}

@media(max-width:768px){

    .team-hero{

        padding:150px 0 90px;

    }

    .team-hero-wrapper{

        gap:45px;

    }

    .team-visual-card{

        padding:32px;

    }

}

@media(max-width:480px){

    .team-hero{

        padding:130px 0 75px;

    }

    .team-hero-content h1{

        font-size:clamp(2.3rem,8vw,4.2rem);

        line-height:1.1;

    }

    .team-hero-buttons{

        flex-direction:column;

    }

    .team-hero-buttons .btn-primary,
    .team-hero-buttons .btn-secondary{

        width:100%;

    }

    .team-visual-card{

        padding:24px;

        border-radius:24px;

    }

}

@media(max-width:360px){

    .team-visual-card{

        padding:20px;

    }

}
/*==================================================
TEAM CARD BADGE
==================================================*/

.team-card-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    margin-bottom:26px;

    border-radius:999px;

    background:var(--sage-soft);

    border:1px solid var(--sage-light);

    color:var(--sage-dark);

    font-size:.88rem;

    font-weight:700;

}

.team-visual-card h3{

    margin-bottom:12px;

}

.team-visual-card > p{

    margin-bottom:30px;

    font-size:.94rem;

    line-height:1.8;

}

/*==================================================
TEAM ROLE FLOW
==================================================*/

.team-role-flow{

    display:grid;

    gap:14px;

}

/*==================================================
TEAM ROLE ITEM
==================================================*/

.team-role-item{

    display:grid;

    grid-template-columns:auto 1fr;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    border-radius:18px;

    background:#fff;

    border:1px solid var(--border);

    transition:all .35s ease;

}

.team-role-item:hover{

    transform:translateX(6px);

    border-color:rgba(47,102,243,.20);

    box-shadow:var(--shadow-xs);

}

/*==================================================
TEAM ROLE ICON
==================================================*/

.team-role-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    flex-shrink:0;

    border-radius:15px;

    background:linear-gradient(
        135deg,
        rgba(47,102,243,.08),
        rgba(174,184,164,.18)
    );

    border:1px solid var(--border);

    color:var(--primary);

    transition:.35s ease;

}

.team-role-item:hover .team-role-icon{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

    transform:scale(1.05);

}

.team-role-icon svg{

    width:21px;

    height:21px;

    stroke:currentColor;

}

/*==================================================
TEAM ROLE CONTENT
==================================================*/

.team-role-content{

    min-width:0;

}

.team-role-content span{

    display:block;

    margin-bottom:3px;

    color:var(--text-muted);

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.06em;

    text-transform:uppercase;

}

.team-role-content strong{

    display:block;

    color:var(--text);

    font-family:"Space Grotesk",sans-serif;

    font-size:.95rem;

    font-weight:600;

    line-height:1.5;

}

/*==================================================
TEAM HERO NOTE
==================================================*/

.team-hero-note{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:24px;

    padding:18px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(47,102,243,.06),
        rgba(174,184,164,.14)
    );

    border:1px solid var(--border);

}

.team-hero-note-dot{

    width:9px;

    height:9px;

    flex-shrink:0;

    margin-top:7px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 0 5px rgba(47,102,243,.10);

}

.team-hero-note p{

    margin:0;

    font-size:.82rem;

    line-height:1.8;

}

.team-hero-note strong{

    color:var(--text);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:480px){

    .team-role-item{

        padding:15px;

        gap:13px;

    }

    .team-role-icon{

        width:42px;

        height:42px;

        border-radius:13px;

    }

    .team-role-icon svg{

        width:19px;

        height:19px;

    }

}

@media(max-width:380px){

    .team-role-item{

        grid-template-columns:1fr;

        gap:14px;

    }

    .team-hero-note{

        padding:15px;

    }

}