:root{
--card-w: 300px;
--card-h: 380px;
--accent: #fff;
--muted: #6b7280;
--bg: #0f172a;
--card-bg: #1e293b;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing: border-box}
body{
margin:0;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
gap:20px;
padding:40px;
background: linear-gradient(180deg, #1e293b, #0f172a);
}

/* grid if multiple cards */
.grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:20px;
width:100%;
max-width:1200px;
}

.flip-card{
perspective: 1200px;
width: var(--card-w);
height: var(--card-h);
margin: 0 auto;
}

.flip-card__inner{
position:relative;
width:100%;
height:100%;
transition: transform 700ms cubic-bezier(.2,.9,.3,1);
transform-style: preserve-3d;
border-radius: 18px;
box-shadow: 0 8px 26px rgba(0,0,0,0.45);
cursor:pointer;
background: transparent;
}

/* Flip on hover or when focused (keyboard accessible) */
.flip-card:hover .flip-card__inner{ transform: rotateY(180deg) scale(1.05); box-shadow:0 16px 40px rgba(0,0,0,0.7);
transform: rotateY(180deg);
}

.flip-face{
position:absolute;
inset:0;
backface-visibility: hidden;
border-radius: 18px;
overflow: hidden;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:22px;
background: var(--card-bg);
}

.flip-face--front{
background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(37,99,235,0.03));
gap:14px;
}

.avatar{
width:110px;
height:110px;
border-radius:50%;
overflow:hidden;
box-shadow: 0 6px 18px rgba(37,99,235,0.14);
border:6px solid rgba(255,255,255,0.8);
}
.avatar img{width:100%;display:block}

.name{
font-size:20px;
font-weight:700;
color:var(--accent);
text-align:center;
margin:0;
}
.position{
margin:0;
color:var(--accent);
font-size:16px;
font-weight:400;
letter-spacing:0.2px;
}

/* Back face */
.flip-face--back{
transform: rotateY(180deg);
gap:12px;
}

.bio{
font-size:15px;
color:var(--accent);
text-align:center;
line-height:1.45;
padding: 0 6px;
}

.divider{
width:64px;height:2px;border-radius:2px;margin:8px 0;background:linear-gradient(90deg,var(--accent),#7c3aed);
}

.socials{
display:flex;
gap:10px;
align-items:center;
justify-content:center;
margin-top:8px;
}

.socials a{
display:inline-flex;
width:40px;height:40px;
align-items:center;justify-content:center;
border-radius:10px;
text-decoration:none;
background:var(--muted);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.socials a:focus{outline:2px solid rgba(37,99,235,0.18);outline-offset:3px}
.socials a:hover{transform:translateY(-4px);box-shadow:0 8px 18px rgba(2,6,23,0.06)}

.socials svg{width:18px;height:18px;display:block;fill: var(--accent);}

/* small responsive tweaks */
@media (max-width:1024px){
.grid{grid-template-columns: repeat(2, 1fr);} 
}
@media (max-width:620px){
.grid{grid-template-columns: 1fr;} 
:root{--card-w: 100%; --card-h: 360px}
.avatar{width:92px;height:92px}
}
.avatar{width:92px;height:92px}